1. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 1 Accessibility Testing ► Code Validators – XHTML & CSS ► Accessibility Validators – Page by Page ► Listening to Your Pages ► Screenreaders/Talking Browsers ► Accessibility Reports ► Practical Testing Plan

2. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 2 Valid Code ► HTML & XHTML Validation http://validator.w3.org/http://validator.w3.org/ ► CSS Validation http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/

3. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 3 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

4. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 4 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

5. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 5 Evaluation of Free Accessibility Tools ► www.webaim.org/techniques/articles/freetools/www.webaim.org/techniques/articles/freetools/

6. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 6 Testing a Site ► http://www.geocaching.comhttp://www.geocaching.com ► WebXact – webxact.watchfire.comwebxact.watchfire.com ► The Wave - www.wave.webaim.orgwww.wave.webaim.org ► Web Developer Toolbar for Firefox https://addons.mozilla.org/extensions/moreinfo.php?id=60 https://addons.mozilla.org/extensions/moreinfo.php?id=60 ► Accessibility Toolbar for IE http://www.nils.org.au/ais/web/resources/toolbar/ http://www.nils.org.au/ais/web/resources/toolbar/

7. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 7 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.comwww.freedomscientific.com Home Page Reader by IBM – a web access tool for blind and low vision users. www.ibm.com/able/ www.ibm.com/able/

8. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 8 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/ http://www.dreamworks.com/ ► Listen to Marvin Garden’s ► http://www.thegarden.com http://www.thegarden.com

9. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 9 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/ http://www.dreamworks.com/ ► Listen to Marvin Garden’s ► http://www.thegarden.com http://www.thegarden.com

10. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 10 ► Assistive Technology Demonstration Handout ► Listen to the Knowbility Site using JAWS Hands On Exercise Listening to a Web page

11. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 11 Testing Your Site(s) - Running Reports ► What site(s) do you need to test ► _______________________ ► Open a browser and run the home page of your site(s) thru ► webxact.watchfire.com webxact.watchfire.com ► http://validator.w3.org/ http://validator.w3.org/ Internet connection here can get busy. We will run these reports now and then come back and review them later in class.

12. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 12 LIFT Machine ► Tests entire sites for accessibility ► Builds accessibility reports ► Results by checkpoints ► Checkpoints expanded

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

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

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

16. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 16 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

17. Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 17 Hands On Exercise Testing Tools ► Apply the practical testing plan on the previous page to your web site starting with your home page. ► Open excel to keep track of the issues you find. ► Create a columns for the following: ► URL ► Problem ► Line number(s) ► Solution ► Comments ► Priority ► As time permits, select another representative page of your site and continue testing. ► Send the excel spreadsheet to yourself in an email