accessible web design techniques © 2001-2005 knowbility, inc. all rights reserved
TRANSCRIPT
© 2001-2005 All rights reserved. Knowbility, Inc 2
Class Objectives
• Introduce accessibility terms / history• Experience the problem of access barriers• Learn accessible design techniques• Comparing Standards• Accessibility testing tools• Provide resources for further study
© 2001-2005 All rights reserved. Knowbility, Inc 4
Points to take away
• Good design is accessible design• Goal is to support full participation for all who
want it. Universal Access.• Separate is not equal: text-only is a last resort• Accessibility improves usability
© 2001-2005 All rights reserved. Knowbility, Inc 5
What is Accessibility?
• A user experience• The ability of a user with a disability to obtain the
same information and perform the same tasks as any other user.
• Generally creating a better user experience for all.
True Test:Can people with disabilities use your web
page?
© 2001-2005 All rights reserved. Knowbility, Inc 6
Types of Disability
• Cognitive/Learning• Auditory• Visual – blind, low vision, color blind• Motor/Physical• Speech
© 2001-2005 All rights reserved. Knowbility, Inc 7
Quasi-Disabilities
These conditions create similar experience • Slow Internet Connection• Old Browser• Missing Plug-ins• No Speakers• Small Display• Eyes Busy/Hands Busy• Noisy Environment
© 2001-2005 All rights reserved. Knowbility, Inc 8
Why is this important?
• More than 50 million Americans – 750 million worldwide – have disabilities.
• Numbers increasing as population ages.• $1 trillion in aggregate annual income.• Emerging best business practices.• Federal mandates.
© 2001-2005 All rights reserved. Knowbility, Inc 9
Accessibility in law and policy
• Americans with Disability Act• Section 508 of the Rehabilitation Act• Texas Administrative Code • Chapter 206 State Web Sites
• University of Texas at Austin Guidelineswww.utexas.edu/web/guidelines/accessibility.html
© 2001-2005 All rights reserved. Knowbility, Inc 10
Section 508
• Requires Federal Agencies to make information technology accessible • 16 objective measurable standards for web
accessibility
• Many non-federal organizations are adopting Section 508 as their own standard.
• Effective date: June 21, 2001
www.access-board.gov/sec508/guide/1194.22.htm
© 2001-2005 All rights reserved. Knowbility, Inc 11
Accessibility Standards
Two sets of Standards:• Section 508 Standards (United States)• Web Content Accessibility Guidelines, WCAG 1.0
(international)
© 2001-2005 All rights reserved. Knowbility, Inc 12
Brief Look at WCAG
www.w3.org/wai
Developed by consensual process– Comprehensive: Includes over 60 checkpoints– Widely accepted: European Union, Canada, Australia have adopted WCAG.
Published in May 1999 (old and about to be replaced by 2.0 anticipated by end of 2005)
Priority 1: Critical
Priority 2: Moderately important
Priority 3: Useful but not essential
© 2001-2005 All rights reserved. Knowbility, Inc 13
Brief Look at Section 508
www.access-board.gov/sec508/guide/1194.22.htm
Legally applies only to federal agencies:– Shorter: 508 has 16 checkpoints, WCAG over 60– Experience: 508 based on WCAG’s most critical accessibility checkpoints.– Measurable: 508 standards developed to be objective and measurable.
© 2001-2005 All rights reserved. Knowbility, Inc 14
Assistive Technology
• ANY device (not necessarily electronic) that allows someone with a disability to perform daily tasks.
• Technology has enormous potential to level the playing field for those with disabilities.
• Accessibility is the key to realizing that potential.
© 2001-2005 All rights reserved. Knowbility, Inc 15
Web Assistive Technology
Alternative Keyboard, Alternative Mouse, Slo-Mo Software, Refreshable Braille Display, Screen Magnifier, Screen Reader…
• Examples of Screen Magnifiers/Screen Readers:• Zoom Text by AI Squared - screen magnifying software
that makes computers accessible/friendly to low-vision users. www.aisquared.com
• JAWS by Freedom Scientific – popular screen reading software. Uses internal speech synthesizer and computer’s sound card to read info from computer screen aloud. www.freedomscientific.com
• Home Page Reader by IBM – a web access tool for blind and low vision users. www.ibm.com/able/
This technology works with very little help from web developers!
© 2001-2005 All rights reserved. Knowbility, Inc 16
Experience the problem
• In teams of two or three.• Experience accessible site, according to
instructions.• Turn off your monitor.• Complete assigned task.• Report on progress.
© 2001-2005 All rights reserved. Knowbility, Inc 18
Section 508
a) Alt Textb) Synchronized alternatives for multimediac) Colord) Use CSSe) Server-side image mapsf) Client-side image mapsg) Simple tables h) Complex tablesi) Framesj) Flickeringk) Text only versionl) Scriptingm) Appletsn) Formso) Skip Navigationp) Timed Response
© 2001-2005 All rights reserved. Knowbility, Inc 19
508 a) Alt Text
(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
The Issue:• Think about listening to your web page• That is why text equivalents must be provided
for images and animations Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 1.
© 2001-2005 All rights reserved. Knowbility, Inc 20
Alt-text for Images
• Every image must have a valid alt attribute. • Images which are not active and which do not
convey information should have alt=“”.• Image links must have a non-empty alt
attribute.• Each INPUT of TYPE=“IMAGE” must have
alt-text specifying the purpose of the button• Each AREA of a MAP must have a valid alt
attribute (more later)
© 2001-2005 All rights reserved. Knowbility, Inc 21
Alt-text Examples
<IMG src=… alt=“United Nations Flag” width=… >
<IMG src=… alt=“Aeronautics” width=…>
Maybe title=“Visit the Aeronautics Home Page”
<IMG src=“spacer.gif” alt=“” width=“1” height=“1”>
© 2001-2005 All rights reserved. Knowbility, Inc 22
Alt-text No-No’s
• Long: “Image of the United Nations Flag (Blue background with white olive branches surrounding map of world) about one and a quarter inches by one inch.”
• Reference to link: “link to aeronautics home page” – we know it’s a link.
• File information: “spacer.gif 236 bytes”• Meaningless out of context: “Click here”
© 2001-2005 All rights reserved. Knowbility, Inc 23
Alt-text - Judgment
• Is it purely Visual? Use alt=“”.
• NLS uses NLS uses alt=“Image of NLS Users”alt=“Image of NLS Users”
© 2001-2005 All rights reserved. Knowbility, Inc 24
Long Descriptions (not widely supported)
The issue: • Sometimes short alt text does not convey the
information in an image.• This is obviously true for charts and graphs.
Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 3.
Glenda’s recommendation. Don’t use longdesc. Put longer descriptions right
directly onto the page as a caption. Or create a second page with
additional details. Don’t limit the longdesc to Assistive Technology!
© 2001-2005 All rights reserved. Knowbility, Inc 25
Long Descriptions
• Use the long description attribute (longdesc) on the IMG element to provide text equivalents for images like charts or graphs.
• Instead, such images may be described in the text of the page or with a caption.
© 2001-2005 All rights reserved. Knowbility, Inc 26
Long Descriptions - Examples
Some images need “long Some images need “long descriptions”like charts and descriptions”like charts and graphsgraphs
< IMG src="traffic.jpg" ... longdesc="traffic.htm"
alt="traffic density graph“ >
traffic.htm :
<p>This graph shows traffic density on Main and Center streets measured in …
© 2001-2005 All rights reserved. Knowbility, Inc 28
508 b) Synchronized Alternatives for Multimedia
(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
The issue is:• Audio files and the audio part of multimedia content
need to be made accessible to people who are deaf. • Information in the video part of multimedia content
needs to be accessible to people who are blind.
Related Guidelines: 508 §1194.22(a, b); WCAG 1.1, 1.4; IBM 4.
© 2001-2005 All rights reserved. Knowbility, Inc 29
Multimedia
• Include a text transcript for each informational audio file.
• Provide synchronized text equivalents (captions) for the audio content of a multimedia presentation.
• Provide synchronized audio descriptions of significant video information in multimedia presentations.
© 2001-2005 All rights reserved. Knowbility, Inc 30
Multimedia - Examples
Check out MAGPie at • http://ncam.wgbh.org/webaccess/magpie
Sample video with captions and audio descriptions:• NCAM Rich Media Project
© 2001-2005 All rights reserved. Knowbility, Inc 31
508 c) Color and Contrast
(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
The Issue: information conveyed by color is lost for people who are color blind
• Whenever color carries information, make sure that other parts of the page convey the same information.
• Be sure there is adequate contrast between text and background.
Related Guidelines: 508 §1194.22(c); WCAG 2.1, 2.2; IBM 12.
© 2001-2005 All rights reserved. Knowbility, Inc 34
Links – color alone?
Do you underline your links?
Or are your links obvious by color alone?
My personal philosophy:• I will underline links when they are found in context • I may or may not underline links when they are found in
obvious navigation bars
See Joe Clark’s book on underlining links at http://www.joeclark.org/book/sashay/serialization/Chapter09.html#h2-2475
© 2001-2005 All rights reserved. Knowbility, Inc 35
Quality Link Text
The issue:• Will link text make sense out of context, in a
list of links?
Related Guidelines: WCAG 13.1.
Note: this is NOT part of the 508 guideline. It will be part of WCAG 2.0.
© 2001-2005 All rights reserved. Knowbility, Inc 36
Links
• Use descriptive link text that lets the user know where the link goes.
• Links to the same place should have the same text; links to different pages should be different.
© 2001-2005 All rights reserved. Knowbility, Inc 37
Links - Examples
Which goes with which?
To go where?
© 2001-2005 All rights reserved. Knowbility, Inc 38
508 d) Use CSS
(d) Documents shall be organized so they are readable without requiring an associated style sheet.
The issue:• Style sheets are an asset to accessibility but they are
ignored by assistive technology so it is important not to convey information with style sheets
• Sometimes individuals use local style sheets for enhanced font size and color
Related Guidelines: 508 §1194.22(d); WCAG 6.1; IBM 11.
© 2001-2005 All rights reserved. Knowbility, Inc 39
CSS
• Make sure pages do not depend on style sheets for content
• Watch positioning, colors and the content property
• Check with style sheets turned off – is document still understandable and usable?
© 2001-2005 All rights reserved. Knowbility, Inc 40
Bonus Points: Relative Units
The issue:• If you use relative units then your page will
resize to fit individual needs
Related guidelines: WCAG 3.4
© 2001-2005 All rights reserved. Knowbility, Inc 41
Relative Units
• Use percentages to specify the width of tables. This refers to the percentage of the screen that the table will fill
• Use percent (%), em, or the terms larger, smaller, etc. for the font-size property. This sets font-size relative to the defaults specified by the user, and allows him or her to change font sizes as needed using the browser
• Question, when is it appropriate to use fixed units, i.e. pixels?
© 2001-2005 All rights reserved. Knowbility, Inc 42
508 (e, f) Image Maps
(e) Redundant text links shall be provided for each active region of a server-side image map.
(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
The issue:• Server side maps require the use of a mouse. Many disabled
users cannot use a mouse.
Related Guidelines: 508 §1194.22(e, f), WCAG 1.2, 9.1; IBM 2.
© 2001-2005 All rights reserved. Knowbility, Inc 43
Image Maps
• Do not use server-side image maps. • Use client-side image maps.• Include alt-text on every AREA of the MAP
specifying the purpose of each hot spot. • Include alt-text on the actual image
© 2001-2005 All rights reserved. Knowbility, Inc 44
Image Maps - Examples
<map name=m> <area coords="0,0,52,52" href=r/c1> <area coords="53,0,121,52" href=r/p1> <area coords="122,0,191,52" href=r/m1> <area coords="441,0,510,52" href=r/wn> <area coords="511,0,579,52" href=r/i1> <area coords="580,0,637,52" href=r/hw>
</map>
© 2001-2005 All rights reserved. Knowbility, Inc 45
Image Maps - Examples
<map name=m> <area coords=“…" href=r/c1 alt=“My Yahoo!”> <area coords=“…" href=r/p1 alt=“Finance”> <area coords=“…" href=r/m1 alt=“Travel”> <area coords=“…" href=r/wn alt=“Email”> <area coords=“…" href=r/i1 alt=“Messenger”> <area coords=“…" href=r/hw alt=“Help”></map>
© 2001-2005 All rights reserved. Knowbility, Inc 46
Image Maps - Examples
<area shape=poly coords="173,7,181,9,180,10,227,9,232,10,233,12,238,11,244,12, 250,13,257,14,263,15,267,17,259,27,251,27,245,36,249,41,246,48, 254,53,256,57,257,61,258,66,262,68,263,73,264,75,263,77, 262,78,260,78,259,80,258,82,257,84,256,86,254,87,243,87,243,88, 229,88,229,92,207,92,206,90,186,90,184,85,173,82,170,45, 172,30,172,7,174,8" href=" ... " alt="North Dakota, Minnesota, South Dakota, Nebraska, Iowa">
© 2001-2005 All rights reserved. Knowbility, Inc 47
508 (g & h) Tables
(g) Row and column headers shall be identified for data tables.
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
The issue:
• Data tables are designed for viewing; column and row headers can be discerned while reading data.
• Accommodation is needed so that screen readers will announce headings as the user navigates a table.
Related Guidelines: 508 §1194.22(g, h); WCAG 5.1, 5.2; IBM 10.
© 2001-2005 All rights reserved. Knowbility, Inc 48
Data Tables
• Place column headings in the first row and place row headings in the first column.
• Use the scope attribute on all heading cells specifying whether the heading labels a column or a row e.g., scope=“row”.
• Use the TH element for all heading cells. • For complex tables: Assign an id to each heading cell
and string of id’s as the header attribute for each data cell to say which are heading cells for that data cell.
• Use the summary attribute and/or CAPTION element.
© 2001-2005 All rights reserved. Knowbility, Inc 49
Simple Data Tables
<table border="1" bgcolor="#ffffcc" Width="60%“ summary=“Fund performance for 1998-2000" > <tr><td colspan="5"align="center"> <strong>Performance</strong></td></tr> <tr> <td width="20%"></td> <th width="10%“ scope=“col”>1998</th> <th width="10%“ scope=“col”>1999</th> <th width="10%“ scope=“col”>2000</th></tr> <tr> <th scope=“row”>Fund</th> <td>17.7</td>...</table>
© 2001-2005 All rights reserved. Knowbility, Inc 50
Complex Data Tables
They do exist (http://workshops.fedstats.gov/htmlSamples.htm).
© 2001-2005 All rights reserved. Knowbility, Inc 51
Complex Data Tables - Example
The “usual” Example:
© 2001-2005 All rights reserved. Knowbility, Inc 52
Complex Data Tables - Code
<table border="1" bgcolor="#ffffcc"> <caption><strong>travel Expense Report</strong></caption> <tr> <td></td> <th id="c2">Meals</th> <th id="c3">Hotels</th> <th id="c4">transport</th> <td id="c5">subtotals</td> </tr> <tr> <th id="r2">San Jose</th> <td></td><td></td><td></td><td></td> </tr> <tr> <td id="r3" >25-Aug-97</td> <td headers="c2 r2 r3">37.74</td> <td headers="c3 r2 r3">112.00</td> <td headers="c4 r2 r3">45.00</td>
© 2001-2005 All rights reserved. Knowbility, Inc 53
508 i) Frames
(i) Frames shall be titled with text that facilitates frame identification and navigation.
The Issue:• Frames are presented to users of assistive
technology as lists of pages. This requires that meaningful text be available for those lists.
Related Guidelines: 508 §1194.22(i); WCAG 12.1; IBM 9.
© 2001-2005 All rights reserved. Knowbility, Inc 54
Frames
• Provide title attributes for each FRAME element in the FRAMESET that make clear the purpose of the frame.
© 2001-2005 All rights reserved. Knowbility, Inc 56
Frames - Examples
<frameset rows="40,*" > <frame src="Title.htm" name="Title" frameborder="yes" title="Title Content"> <frameset cols="150,*,150"> <frame src="Left.htm" name=“Main_Navigation" frameborder="yes" title=“Main Navigation"> <frameset rows="40,*" border="2"> <frame src="Banner.htm" name="Banner_Ad" frameborder="yes" title="Banner Ad"> <frame src="Content1.htm" name="Main_Content" frameborder="yes" title="Main Content"> </frameset> <frame src="Right.htm" name=“Local_Navigation" frameborder="yes" title=“Local Navigation"> </frameset><noframes>
© 2001-2005 All rights reserved. Knowbility, Inc 57
Frames - Examples
As seen with Lynx: FRAME: frame 70890 FRAME: frame 70888
© 2001-2005 All rights reserved. Knowbility, Inc 58
508 j) Flickering
(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
The issue is:• Flicker in the range 2Hz to 55Hz may cause
seizures in people with photosensitive epilepsy.
Related guidelines: 508 §1194.22(j); WCAG 7.1; IBM 13.
© 2001-2005 All rights reserved. Knowbility, Inc 59
Flickering
• The frequency of flicker (image appearing and disappearing) in animated GIF’s, Flash or other objects must be less than 2 Hz or greater than 59 Hz.
© 2001-2005 All rights reserved. Knowbility, Inc 60
Flickering- Examples
• Warning! Flash Example of Flicker (http://ncam.wgbh.org/richmedia/flicker_demo.html)
• For comparison, the caret blink rate (or cursor blink rate) in Windows 2000 varies from 1/2 Hz at the slowest setting to 3 Hz at the fastest; the middle setting is about 1 Hz.
© 2001-2005 All rights reserved. Knowbility, Inc 61
508 k) Text-Only Version
(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
LAST RESORT
© 2001-2005 All rights reserved. Knowbility, Inc 62
Text Only?
• No other way to make content accessible• Text only version is up-to-date with “main”
version• Text only version provides equivalent
functionality as “main” version
© 2001-2005 All rights reserved. Knowbility, Inc 63
508 l) Scripts
(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
The issue:• Content created with scripts may be inaccessible,
especially to people using screen readers and/or unable to use the mouse.
Related Guidelines: 508 §1194.22(l); WCAG 6.3, 6.4, 8.1, 9.3; IBM 5.
© 2001-2005 All rights reserved. Knowbility, Inc 64
Scripts – Some Cautions
• If text is made visible through attribute changes with JavaScript, then the interactions must be keyboard accessible, or the content must be readily available in some other accessible way.
• Do not use the onChange event on select menus for form submission.
• For more information on Accessible Javascript see WebAim www.webaim.org/techniques/javascript/
© 2001-2005 All rights reserved. Knowbility, Inc 65
508 m) Applets
(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).
The issue:• Software associated with a web page must be
accessible.
Related Guidelines: 508 §1194.22(m); WCAG 6.3, 6.4, 8.1; IBM 6.
© 2001-2005 All rights reserved. Knowbility, Inc 66
Applets and Plugins
• Information conveyed and the function provided by applets, plugins or other objects must be available to users of screen readers and other assistive technology
• Check that the software is directly accessible (desktop players, for example) or provide accessible alternatives.
© 2001-2005 All rights reserved. Knowbility, Inc 67
508 n) Forms
(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
The issue:• “Tell me what this form control is for!”• People using screen readers need to be told the
purpose of an edit field or check box.Related Guidelines: 508 §1194.22(n); WCAG 10.2, 12.4, 9,3; IBM 7
© 2001-2005 All rights reserved. Knowbility, Inc 68
Accessible Forms
• Position prompts immediately adjacent to input controls
• Associate prompts with the corresponding INPUT element using the LABEL element with the for attribute
• Use the title attribute on form controls when text not available for LABEL
© 2001-2005 All rights reserved. Knowbility, Inc 69
Accessible Forms - LABEL
<LABEL for="name">Last Name:</LABEL> …
<INPUT size="20" type="text" id="name" name="Name"> …
<LABEL for="old">I have visited before.</LABEL>…
<INPUT type="radio" checked id="old" name="visited" value="yes">
© 2001-2005 All rights reserved. Knowbility, Inc 70
Accessible Forms -Title
• Some times there is no text to use with Label:
<INPUT type="radio" … title=“disagree 3">
© 2001-2005 All rights reserved. Knowbility, Inc 71
508 o) Skip Navigation
(o) A method shall be provided that permits users to skip repetitive navigation links.
The issue:• Navigation links often precede the main
content on every page. People listening to the page have to listen to those links on every page making the main content difficult to find
Related Guidelines: 508 §1194.22(o); WCAG 13.5, 13.6; IBM 8
© 2001-2005 All rights reserved. Knowbility, Inc 72
Skip Navigation
• If there are navigation links before the main content of the page, provide a link at the top of the page that jumps over the navigation to the main content.
© 2001-2005 All rights reserved. Knowbility, Inc 73
Skip Navigation – The Problem
A screen reader user has to listen to everything before the “main content.”
© 2001-2005 All rights reserved. Knowbility, Inc 75
Skip Navigation – Example
<a href="#ContentArea">
<img src= … alt="Click here to skip to main content" …
<a name="ContentArea"></a> … Updated: 12:03 …
© 2001-2005 All rights reserved. Knowbility, Inc 76
Skip Navigation – Hidden or Far Left?
Hidden –
.skiplink {display:none}
Far Left –
#skiplink { position:absolute; left:-999px; width:990px;
}
© 2001-2005 All rights reserved. Knowbility, Inc 77
508 (p) Timed Response
(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
The issue:• A person with a disability may not be able to
read, move around, or fill in a Web form within the prescribed amount of time.
Related Guidelines: 508 §1194.22(p)
© 2001-2005 All rights reserved. Knowbility, Inc 78
Timed Response
• Do not set a time limit on the users response.• Notify the user if a process is about to time-out• Provide a prompt asking whether additional time
is needed.
© 2001-2005 All rights reserved. Knowbility, Inc 80
Correct Markup
The issue:• If you use structural markup for its intended
purpose then assistive technology can take advantage of the structure when navigating the page
• If you use structural markup in the wrong way, a user of assistive technology may be confused when navigating the page
Related Guidelines: WCAG 3.1, 3.5, 3.7, 5.4
Will be part of WCAG 2.0
© 2001-2005 All rights reserved. Knowbility, Inc 81
Correct Markup
• Use structural markup (H1, UL, P, …) for their designated purpose; don’t simply change font size and weight for a heading, for example.
• Don’t use structural markup to replace style changes, e.g., don’t use headings to achieve large font.
• Use BLOCKQUOTE for quotations, not for indentation
© 2001-2005 All rights reserved. Knowbility, Inc 82
17. Pop-up Windows
The issue:• It is extremely disorienting to some people
when content opens in a new window. • If you cannot see the screen or if your browser
is maximized you probably won’t know that a new window has appeared.
Related guidelines: WCAG 10.1.
© 2001-2005 All rights reserved. Knowbility, Inc 83
Pop-up Windows
• Do not use spontaneous pop-up windows.• If you must display content in a new window,
include the fact that a new browser window will be opened in the link text (“product list in a new window”).
• Provide a simple way to close the pop-up.
© 2001-2005 All rights reserved. Knowbility, Inc 84
Bonus Points
• Abbreviations and/or acronyms expanded
• Identify primary natural language and language changes
• Logical tab order
• Provide keyboard shortcuts (access keys)
• Include non-link, printable characters between adjacent links.
• Provide abbreviations for long headers in data tables.
• Use XHTML 1.0 to create site. With strict DTD.
© 2001-2005 All rights reserved. Knowbility, Inc 86
WCAG 1.0, 508 or WCAG 2.0?
• WCAG 1.0 – May 5, 1999• 508 – effective June 21, 2001• WCAG 2.0 – target date December 2005
© 2001-2005 All rights reserved. Knowbility, Inc 87
WCAG 1.0 P1 vs 508WCAG 1.0 (Priority 1) Compare 508
1.1 Alt text Very similar a) Alt text (just doesn’t specify all the non-text element types)
1.2 Server-Side Image Maps
Same e) Server-Side Image Maps
1.3 Auditory Description Not in 508 508 encourages audio descriptions within the synchronized alternatives, not as a separate track
1.4 Synchronized multimedia
Same b) Synchronized multimedia
2.1 Color Same c) Color
4.1 Natural Language Not in 508 Not many AT support language change markup
© 2001-2005 All rights reserved. Knowbility, Inc 88
WCAG 1.0 P1 vs 508 continued…
WCAG 1.0 (Priority 1) Compare 508
5.1 Table Headers Same g) Simple Tables
5.2 Complex Tables Same h) Complex Tables
6.1 Style Sheets Same h) Style Sheets
6.2 Dynamic Content Not in 508 Deemed unclear. Just a backup to other checkpoints
6.3 Scripting WCAG more restrictive
l) Scripting & m) applets
© 2001-2005 All rights reserved. Knowbility, Inc 89
WCAG 1.0 P1 vs 508 continued…
For a detailed comparison of WCAG 1.0 to 508 see http://www.jimthatcher.com/sidebyside.htm
WCAG 1.0 (Priority 1) Compare 508
7.1 Flicker 508 More specific
j) Flicker
9.1 Client Side Image Map Same f) Client Side Image Map
11.4 Text only – last resort Same k) Text only – last resort
12.1 Frames Same i) Frames
14.1 Clear Language Not in 508 Subjective. Deemed to difficult to enforce.
© 2001-2005 All rights reserved. Knowbility, Inc 90
WCAG 2.0 Design Principles
• Content must be perceivable• Interface elements in the content must be
operable• Content and controls must be understandable• Content must be robust enough to work with
current and future technologies
© 2001-2005 All rights reserved. Knowbility, Inc 91
WCAG 2.0 Working Draft (June 2005)
1 Perceivable1.1 Provide text alternatives for all non-text content1.2 Provide synchronized alternatives for multimedia1.3 Ensure that information, functionality, and structure can be
separated from presentation1.4 Make it easy to distinguish foreground information from
background images or sounds
2 Operable2.1 Make all functionality operable via a keyboard interface2.2 Allow users to control time limits on their reading or interaction2.3 Allow users to avoid content that could cause seizures due to
photosensitivity2.4 Provide mechanisms to help users find content, orient
themselves with it, and navigate through it
© 2001-2005 All rights reserved. Knowbility, Inc 92
WCAG 2.0 Working Draft (June 2005)
3 Understandable3.1 Make text content readable and understandable
3.2 Make the placement and functionality of content predictable
4 Robust4.1 Use technologies according to specification
4.2 Ensure that user interfaces are accessible or provide an accessible alternative(s)
© 2001-2005 All rights reserved. Knowbility, Inc 94
Accessibility Testing tools
• Accessibility Validators – Page by Page• Listening to Your Pages• Screenreaders/Talking Browsers
• Accessibility Reports • Practical Testing Plan
© 2001-2005 All rights reserved. Knowbility, Inc 95
Accessibility ValidatorsPage by Page
• WebXact• The Wave• Web Developer for Firefox (extension)• Accessibility Toolbar for IE
Accessibility Tools can only automatedly test approximately 27% of the issues.
Accessibility Testing requires human brain power!
© 2001-2005 All rights reserved. Knowbility, Inc 96
3 Free Accessibility Validators
Tool + -WebXact *New tool from the folks at
Watchfire (replaces bobby)
*Excellent resource
•Doesn’t have visual info you used to get from Bobby
Wave •Good for seeing “reading order” & alt text
•Report not as intuitive•Doesn’t explain how to solve problems
Accessibility Toolbar Great tool that combines many accessibility validators and simulations
•Beta version (occasional bug)•Only available for PC/IE
© 2001-2005 All rights reserved. Knowbility, Inc 97
Evaluation of Free Accessibility Testing Tools
www.webaim.org/techniques/articles/freetools/
Articles has links
to all the free
accessibility testing tools
© 2001-2005 All rights reserved. Knowbility, Inc 98
Testing a Site
• http://www.geocaching.com• WebXact• Wave• Web Developer in Firefox• Accessibility Toolbar in IE
© 2001-2005 All rights reserved. Knowbility, Inc 99
Listening to Your Site
The real test – can users with disabilities actually use your site?
Two examples of assistive technology
•JAWS by Freedom Scientific – popular screen reading software. Uses internal speech synthesizer and computer’s sound card to read info from computer screen aloud. www.freedomscientific.com
•Home Page Reader by IBM – a web access tool for blind and low vision users. www.ibm.com/able/
© 2001-2005 All rights reserved. Knowbility, Inc 100
Demo of Home Page Reader
• Home Page Reader – a talking browser• Listen to UT Home Page
• Link Lists (control + L)• Skip to Main
• Listen to Dreamworks• http://www.dreamworks.com/
© 2001-2005 All rights reserved. Knowbility, Inc 101
Demo of JAWS
• JAWS – a true screenreader for PCs• reads IE, Word, Excel, Powerpoint, Desktop…
• Listen to UT Home Page• Links on page (tab to move from link to link)• Link Lists – alpha and page order (Insert F7)
• Listen to Dreamworks• http://www.dreamworks.com/
© 2001-2005 All rights reserved. Knowbility, Inc 102
LIFT Machine
• Tests entire sites for accessibility
• Builds accessibility reports• Results by checkpoints• Checkpoints expanded• Edit Preferences• Create Reports• Resources – How to fix• Previews of pages for debugging
© 2001-2005 All rights reserved. Knowbility, Inc 103
Review LIFT Report
• www.geocaching.com• http://lm-ny.usablenet.com/lm/index.jsp
© 2001-2005 All rights reserved. Knowbility, Inc 104
Tools for Prioritizing
Accessibility Errors
• LIFT – www.usablenet.com
• WebXM –www.watchfire.com/products/webxm/
• Step508 - http://www.section508.gov/index.cfm?fuseaction=content&id=155
© 2001-2005 All rights reserved. Knowbility, Inc 105
Watchfire WebXM
• http://webq.austin.utexas.edu/webxm/• austin\gsims• Dashboard – Site Health• Favorites - Reports• ITS Accessibility• Section 508 Issues
© 2001-2005 All rights reserved. Knowbility, Inc 106
A Practical Plan
1. Test with your browser• Turn off images• Don’t use the mouse• Increase font size• Change window size
2. Run online Accessibility Tests on representative pages
• use more than one tool, example: Watchfire & Wave
3. Listen to your pages• Home Page Reader or JAWS
4. Run a LIFT or WebXM Report5. Hands on Accessibility Testing