web accessbility

Additional Chapter

Test QuestionsTrue, False, or I don’t knowKSU web content is currently accessible.

Accessible web design benefits only a small percentage of the population.

Test QuestionsThe five main categories of disabilities affected by Internet accessibility barriers are...•Vision - blind, low-vision,

colorblind•Deaf and Hard-of-hearing•Motor•Cognitive•Seizure

Accessibility“Development of information systems flexible enough to accommodate the needs of the broadest range of users...regardless of age or disability”

Accessibility MythsAccessibility Myths:

Accessibility means ugly websitesAccessible sites look boring“Text-only” pages are a good way to provide accessibility

Accessibility adds cost to a web projectExample of beautiful sites and

accessible: accesssites.org, cssliquid.com. www.cssbeauty.com

:// . 3. / / /2005/http www w org WAI EO Demo

Web Accessibility Guidelines and LawsSection 508 (US)Others

www.w3.org/WAI/Policy/

WCAG 1.0 --- 1999WCAG 2.0 --- 2008

Web Content Accessibility Guidelines 2.0

4 general principles (POUR) Twelve guidelines (4, 4, 3,

1) 61 success criteria (22, 20,

17, 2) Level A, Level AA, Level AAA

erceivableperable

nderstandableobust

WCAG 2.0 principles

WCAG 2.0 guidelines Perceivable

Provide text alternatives for non-text content. Provide captions and alternatives for audio and video content. Make content adaptable; and make it available to assistive

technologies. Use sufficient contrast to make things easy to see and hear.

Operable Make all functionality keyboard accessible. Give users enough time to read and use content. Do not use content that causes seizures. Help users navigate and find content.

Understandable Make text readable and understandable. Make content appear and operate in predictable ways. Help users avoid and correct mistakes.

Robust Maximize compatibility with current and future technologies.

Success Criteria LevelsSuccess criteria have 3 levels– A, AA, AAA

Level A: must satisfy, otherwise one or more groups will find it impossible to access information

Level AA: should satisfy, otherwise one or more groups will find it difficult to access information

Level AAA: may address, otherwise one or more groups will find it somewhat difficult to access information

WCAG 2.0 improvements Principles, guidelines and

success criteria are technology-agnostic

Success criteria give clearer guidance than WCAG 1.0 checkpoints

Each success criterion is more easily testable

Getting started with WCAG 2.0 WebAIM's unofficial checklist

http://webaim.org/standards/wcag/checklist

What is equivalent alt text?

CONTENT and FUNCTION.VERY RARELY Description.

Alternative Text

<imgsrc=”picture.jpg” alt=”…………” />

Alternative Textshould...Be accurate and equivalent.Be succinct.NOT be redundant.NOT use the phrases "image of ..." or

"graphic of ..." to describe the image.

Complex ImagesProvide the alternative in context

Provide a link to the longer description page

Use the longdesc attribute(The main image should still have some alt

text!)

TablesScreen readers LINEARIZE table dataHow a Screen Reader processes a table:

Top to bottom, left to right Row 1, Column 1 Row 1, Column 2 Row 1, Column 3 Row 2, Column 1 Etc….

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   <html> <head> <title>XHTML Table Without Headers</title> <style type = "text/css"> body { background-color: #ccffaa; text-align: center } </style> </head> <body> <p>Price of Fruit</p> <table border = "1" width = "50%"> <tr> <td>Fruit</td> <td>Price</td> </tr>

<tr> <td>Apple</td>

<td>$0.25</td> </tr>

<tr> <td>Orange</td> <td>$0.50</td>

</tr> </table></body></html>

21

ExampleNot an Accessible Design

Reads table as :“Price of Fruit Fruit Price Apple $0.25 Orange $0.50”

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html> <head> <title>XHTML Table Without Headers</title> <style type = "text/css"> body { background-color: #ccffaa; text-align: center } </style> </head> <body> <table border = "1" width = "50%“summary = "This table uses the elements and id and headers attributes to make the table readable by screen readers">

<caption><strong>Price of Fruit</strong></caption> <tr> <th id = "fruit">Fruit</th> <th id = "price">Price</th> </tr> <tr> <td headers = "fruit">Apple</td> <td headers = "price">$0.25</td> </tr> <tr> <td headers = "fruit">Orange</td>

<td headers = "price">$0.50</td> </tr>

</tr> </table></body></html> 22

ExampleAccessible Design

Reads table as: “Fruit: Apple, Price: $0.25 Fruit: Orange, Price: $0.50”

TablesDO NOT use table for layouts. Make your table as simple as possibleUse caption element as a title for the data table

and and/or use the summary attribute to give a brief overview of the structure of the table.

Use id attributes on the header cells and the headers attribute on the data cells to explicitly associate header information with data cells. This is essential if there are data cells whose header information is not in the same row and the same column as that cell.

Form LabelsUse clear languageUse form accessibility tags:

For, ID, name, label, Group related items together

fieldset, optgroup and legendAdd hints to text boxes

<label for=”firstname”>First Name:</label><input id=”firstname” name=”firstname” />

First Name:

Other Design TipsNavigation

Use clear, descriptive text for hyperlinks

Set hyperlinks to open in new window

Use meaningful text for page titlesColor

Avoid using color as only indicatorText

Use clear, simple language

Other Design TipsMultimedia

For audio clips, use a description linkFor video clips, use captioning or use a description link

For video clips, provide a link to an audio file

Provide a link to download appropriate audio/video player

Testing tools (outline)Automatic web accessibility testing

Human Review – tools that assistUser testing

Beyond the scope of this courseBut check out Shawn Lawton Henry’s

Just Ask: Integrating Accessibility Throughout Design

Automatic Testing (outline)Automatic web accessibility testing

Free 1-page toolsMore general free toolsDesktop toolsEnterprise tools

Tools lists:http://www.w3.org/WAI/ER/tools/completehttp://www.colostate.edu/Dept/ATRC/tools.htmhttp://www.webaim.org/articles/tools/

Some Free 1-page tools on the webCynthiaSays (HiSoftware)

http://cynthiasays.com

Worldspaceby Deque – New http://worldspace.deque.com

More General Free ToolsThe WAVE (Utah State)

http://wave.webaim.org

ACheckerhttp://achecker.ca/checker/

index.php/(WCAG 2.0)

Desktop Commercial Tools

Ramp ($69-$1499)http://www.deque.com

InFocus ($1795)http://www.ssbtechnologies.com

Enterprise Tools (expensive)

WebKing by Parasofthttp://parasoft.com/jsp/products/home.jsp?

product=WebKing

Rational Policy Tester by IBM Worldspaceby Deque

http://deque.com/products/

Human ReviewHuman Review

Notepad (source code)Screen Readers and other Assistive

TechnologySpecial issue tools (like contrast)Toolbars (the best news)

(User testing – Beyond scope )

Assistive Technology (AT)Testing with assistive technologiesJAWS (Freedom Scientific)

http://www.hj.com

Window-Eyes (GW Micro)http://www.gwmicro.com

Fangs http://www.standards-schmandards.com/projects/

fangs/

Toolbars - for anyone interested in accessibility

Web accessibility toolbar - The Paciello Group

http://www.paciellogroup.com/resources/wat-ie-about.html

Best thing that has happened for accessibility – and a toolbar for Firefox

Web Developer Extension for Firefoxhttp://chrispederick.com/work/webdeveloper

Build Websites with Accessibility in mind!

web accessbility

Documents