Accessible Web Design Techniques
© 2001-2005 Knowbility, Inc. All rights reserved
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 2
Introduce accessibility terms and history
© 2001-2005 All rights reserved. Knowbility, Inc 3
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 4
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 5
Types of Disability
• Cognitive/Learning • Auditory • Visual – blind, low vision, color blind • Motor/Physical • Speech © 2001-2005 All rights reserved. Knowbility, Inc 6
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 7
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 8
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 Guidelines www.utexas.edu/web/guidelines/accessibility.html
© 2001-2005 All rights reserved. Knowbility, Inc 9
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 10
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 11
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 12
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 13
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 14
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
users. by AI Squared - screen magnifying software that makes computers accessible/friendly to low-vision 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 15
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 16
Learn accessible design techniques
© 2001-2005 All rights reserved. Knowbility, Inc 17
Section 508
a) Alt Text b) Synchronized alternatives for multimedia c) Color d) Use CSS e) Server-side image maps f) Client-side image maps g) Simple tables h) Complex tables i) Frames j) Flickering k) Text only version l) Scripting m) Applets n) Forms o) Skip Navigation p) Timed Response © 2001-2005 All rights reserved. Knowbility, Inc 18
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 19
• • • • •
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 20
Alt-text Examples
alt=“United Nations Flag”
width=… >
alt=“Aeronautics”
width=…> Maybe
title=“Visit the Aeronautics Home Page”
alt=“”
width=“1” height=“1”> © 2001-2005 All rights reserved. Knowbility, Inc 21
• • • •
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 22
•
Alt-text - Judgment
Is it purely Visual? Use
alt=“”
.
• NLS uses
alt=“Image of NLS Users”
© 2001-2005 All rights reserved. Knowbility, Inc 23
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 24
• •
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 25
Long Descriptions - Examples
Some images need “long descriptions”like charts and graphs < IMG src="traffic.jpg" ...
longdesc="traffic.htm"
alt="traffic density graph“ > traffic.htm :
This graph shows traffic density on Main and Center streets measured in … © 2001-2005 All rights reserved. Knowbility, Inc 26
Long Descriptions - Examples
© 2001-2005 All rights reserved. Knowbility, Inc 27
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 28
• • •
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 29
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 30
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 31
Color Alone - Example
© 2001-2005 All rights reserved. Knowbility, Inc 32
Color Alone - OK
© 2001-2005 All rights reserved. Knowbility, Inc 33
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/Chapte r09.html#h2-2475 © 2001-2005 All rights reserved. Knowbility, Inc 34
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 35
• •
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 36
Links - Examples
Which goes with which?
To go where?
© 2001-2005 All rights reserved. Knowbility, Inc 37
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 38
• • •
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 39
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 40
• • •
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 41
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 42
• • • •
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 43
Image Maps - Examples
© 2001-2005 All rights reserved. Knowbility, Inc 44
Image Maps - Examples
alt=“My Yahoo!”
>
alt=“Finance”
>
alt=“Travel”
>
alt=“Email”
>
alt=“Messenger”
>
alt=“Help”
>
© 2001-2005 All rights reserved. Knowbility, Inc 45
Image Maps - Examples
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 46
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 47
• • • • •
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 and string of id ’s as the header to each heading cell 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 48
Simple Data Tables
Performance width= width= "10% “ width= "10% "10% 17.7
“ “ scope= “ col ” > 1998 scope= “ col ” > 1999 scope= “ col ” > 2000 Fund ...
> © 2001-2005 All rights reserved. Knowbility, Inc 49
Complex Data Tables
They do exist (http://workshops.fedstats.gov/htmlSamples.htm).
© 2001-2005 All rights reserved. Knowbility, Inc 50
Complex Data Tables - Example
The “usual” Example: © 2001-2005 All rights reserved. Knowbility, Inc 51
Complex Data Tables - Code
travel Expense Report
id="c2">Meals
Hotels transport subtotals
id="r2">San Jose
id="r3" >25-Aug-97
headers="c2 r2 r3">37.74
112.00 45.00 © 2001-2005 All rights reserved. Knowbility, Inc 52
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 53
•
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 54
Frames - Examples
© 2001-2005 All rights reserved. Knowbility, Inc 55
Frames - Examples
name="Title"
frameborder="yes"
title="Title Content"
>
name=“Main_Navigation"
frameborder="yes"
title=“Main Navigation"
>
name="Banner_Ad"
frameborder="yes"
title="Banner Ad"
>
name="Main_Content"
frameborder="yes"
title="Main Content"
>
name=“Local_Navigation"
frameborder="yes"
title=“Local Navigation"
>
© 2001-2005 All rights reserved. Knowbility, Inc 56
Frames - Examples
As seen with Lynx: FRAME: frame 70890 FRAME: frame 70888 © 2001-2005 All rights reserved. Knowbility, Inc 57
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 58
•
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 59
• •
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 60
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 61
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 62
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 63
• • •
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 64
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 65
•
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 66
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 67
• • •
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 68
Accessible Forms - LABEL
for= "name"
> Last Name:
… size= "20" type= "text"
id= "name"
name= "Name" > …
for= "old"
> I have visited before.
…
type= "radio" checked
id= "old"
name= "visited" value= "yes" > © 2001-2005 All rights reserved. Knowbility, Inc 69
•
Accessible Forms -Title
Some times there is no text to use with Label:
title=“disagree 3
"> © 2001-2005 All rights reserved. Knowbility, Inc 70
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 71
•
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 72
Skip Navigation – The Problem
A screen reader user has to listen to everything before the “main content.” © 2001-2005 All rights reserved. Knowbility, Inc 73
Skip Navigation – Example
© 2001-2005 All rights reserved. Knowbility, Inc 74
Skip Navigation – Example
alt="Click here to skip to main content"
… … Updated: 12:03 … © 2001-2005 All rights reserved. Knowbility, Inc 75
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 76
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 77
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 78
Just Do IT!
© 2001-2005 All rights reserved. Knowbility, Inc 79
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 80
• • •
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 81
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 82
• • •
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 83
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 84
Comparing Standards
and looking forward… © 2001-2003 Knowbility, Inc. All rights reserved
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 86
WCAG 1.0 P1 vs 508
WCAG 1.0 (Priority 1)
1.1 Alt text
Compare 508
Very similar a) Alt text
(just doesn’t specify all the non-text element types)
1.2 Server-Side Image Maps 1.3 Auditory Description Same e) Server-Side Image Maps Not in 508
508 encourages audio descriptions within the synchronized alternatives, not as a separate track
1.4 Synchronized multimedia 2.1 Color Same Same b) Synchronized multimedia c) Color 4.1 Natural Language © 2001-2005 All rights reserved. Knowbility, Inc Not in 508
Not many AT support language change markup
87
WCAG 1.0 P1 vs 508 continued…
WCAG 1.0 (Priority 1)
5.1 Table Headers 5.2 Complex Tables 6.1 Style Sheets 6.2 Dynamic Content 6.3 Scripting
Compare
Same
508
g) Simple Tables Same Same h) Complex Tables h) Style Sheets Not in 508
Deemed unclear. Just a backup to other checkpoints
WCAG more restrictive l) Scripting & m) applets © 2001-2005 All rights reserved. Knowbility, Inc 88
WCAG 1.0 P1 vs 508 continued…
WCAG 1.0 (Priority 1)
7.1 Flicker
Compare
508 More specific
508
j) Flicker 9.1 Client Side Image Map 11.4 Text only – last resort Same Same f) Client Side Image Map k) Text only – last resort 12.1 Frames Same i) Frames 14.1 Clear Language Not in 508
Subjective. Deemed to difficult to enforce.
For a detailed comparison of WCAG 1.0 to 508 see http://www.jimthatcher.com/sidebyside.htm
© 2001-2005 All rights reserved. Knowbility, Inc 89
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 90
WCAG 2.0 Working Draft (June 2005)
1 Perceivable
1.1 Provide text alternatives for all non-text content 1.2 Provide synchronized alternatives for multimedia 1.3 Ensure that information, functionality, and structure can be separated from presentation 1.4 Make it easy to distinguish foreground information from background images or sounds
2 Operable
2.1 Make all functionality operable via a keyboard interface 2.2 Allow users to control time limits on their reading or interaction 2.3 Allow users to avoid content that could cause seizures due to photosensitivity 2.4 Provide mechanisms to help users find content, orient themselves with it, and navigate through it © 2001-2005 All rights reserved. Knowbility, Inc 91
WCAG 2.0 Working Draft (June 2005)
3 Understandable
3.1 Make text content readable and understandable 3.2 Make the placement and functionality of content predictable
4 Robust
4.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 92
Accessibility testing
© 2001-2005 All rights reserved. Knowbility, Inc 93
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 94
Accessibility Validators Page 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 95
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 Accessibility Toolbar
•Good for seeing “reading order” & alt text •Report not as intuitive •Doesn’t explain how to solve problems 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 96
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 97
• http://www.geocaching.com
• • • • WebXact Wave Web Developer in Firefox Accessibility Toolbar in IE
Testing a Site
© 2001-2005 All rights reserved. Knowbility, Inc 98
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 99
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 100
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 101
• 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
LIFT Machine
© 2001-2005 All rights reserved. Knowbility, Inc 102
Review LIFT Report
• • www.geocaching.com
http://lm-ny.usablenet.com/lm/index.jsp
© 2001-2005 All rights reserved. Knowbility, Inc 103
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 104
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 105
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 Report 5. Hands on Accessibility Testing © 2001-2005 All rights reserved. Knowbility, Inc 106
Next Steps
What accessibility actions do you plan to take next?
What resources do you need now?
© 2001-2003 Knowbility, Inc. All rights reserved