Copyright © 2005 Knowbility, Inc. 1Accessible Web Design Techniques

Accessibility Testing

► Accessibility Validators – Page by Page

► Listening to Your Pages

► Screenreaders/Talking Browsers

► Accessibility Reports

► Practical Testing Plan

2Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Accessibility Validators - Page by Page

► WebXact

► The Wave

► Web Developer for Firefox (extension)

► Accessibility Toolbar for IE

Accessibility Testing Requires the Human Brain

Approximately 27% of Accessibility Issues can be tested automated

3Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

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

►Only available on PC/IE

Web Developer Toolbar ►Fantastic tool that combines many accessibility tools

►Only available in Firefox

Accessibility Validators - Page by Page

4Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Evaluation of Free Accessibility Tools

► www.webaim.org/techniques/articles/freetools/

5Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Testing a Site► http://www.geocaching.com

► WebXact – webxact.watchfire.com

► The Wave - www.wave.webaim.org

► Web Developer Toolbar for Firefox https://addons.mozilla.org/extensions/moreinfo.php?

id=60

► Accessibility Toolbar for IEhttp://www.nils.org.au/ais/web/resources/toolbar/

6Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Listening to your pages

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/

7Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Demo of Home Page Reader► Home Page Reader – a talking browser

► Listen to UT Home Page

► Link Lists

► Skip to Main

► Listen to Dreamworks

► http://www.dreamworks.com/

► Listen to Marvin Garden’s

► http://www.thegarden.com

8Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Demo of JAWS► JAWS – a true screenreader for PCs

► reads IE, Word, Excel, Powerpoint, Desktop…

► Listen to UT Home Page

► Links on page

► Link Lists – alpha and page order

► Listen to Dreamworks

► http://www.dreamworks.com/

► Listen to Marvin Garden’s

► http://www.thegarden.com

9Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

LIFT Machine

► Tests entire sites for accessibility

► Builds accessibility reports

► Results by checkpoints

► Checkpoints expanded

10

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

11

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

12

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

13

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

1. Test with your browser

‣ Turn off images, Don’t use the mouse, Turn off your speakers, Increase font size, Change window size.

2. Testing with Toolbars

‣ Turn off CSS, Turn off Javascript, Set to Greyscale, Display Structure (Headings, Lists…)

3. Run online Accessibility Tests on representative pages

‣ use more than one tool, example: WebXact & Wave

4. Listen to your pages

‣ JAWS or HomePage Reader

5. If you have access, Run a LIFT Report

6. Hands on Accessibility Testing with Users who have disabilities

A Practical Testing Plan

14

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Hands On ExerciseTesting Tools

► Test any website(s) you choose using► webxact.watchfire.com ► www.wave.webaim.org► IE Accessibility Toolbar► Firefox Web Developer Toolbar