web accessbility
TRANSCRIPT
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"> <!-- Fig. 34.3: withoutheaders.html --> <!-- Table without headers --> <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"> <!-- Fig. 34.3: witheaders.html --> <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!