1. Practical Accessibility Testing The High Tech + High Touch Recipe for Success Photo by StarsApart

2. Glenda the Goodwitch webstandards.org knowbility.org deque.com 2

3. 3

4. WEB ACCESSIBILITY TESTING RECIPE 4

5. Web development process 5

6. Accessible web development 6 1.Plan  Assess site, people, process  Benchmark industry  Review design and coding standards  Develop roadmap 2.Equip  Adopt development and test tools  Integrate with IDE, WCM and Testing tools 6.Sustain  Continuous monitoring  Vendor verification  New employee training 3.Empower  Role-specific training 4.Test  Distributed unit tests  Centralized, automated tests  Expert usability evaluation with assistive technology 5.Remediate  Prioritize  Fix  Retest

7. Accessibility Testing is NOT Icing

8. Cost to Fix Accessibility Defects 8

9. Practical Accessibility Testing The Right Mix of High Tech High Touch

10. High Touch Accessibility Testing Tools Heuristic – Perceivable, Operable, Understandable Robust Expert Manual Accessibility Testing – Screenreaders, Keyboard Only, No Speakers Usability Testing w People with Disabilities 10

11. JennisonLaurenGene ScreenreaderNeeds CaptionsKeyboard Only 11

12. High Tech + High Touch Accessibility Testing Tools Page by Page Testing Tools 12

13. Page by Page Testing Tools –The Wave –Web Developer for Firefox –Functional Accessibility Evaluator –Juicy Studios Accessibility Toolbar –Jim Thatcher’s Favelets –FireEyes Auto Test 25-30% of issues 13

14. High Tech Accessibility Testing Tools Enterprise Accessibility Testing Tools 14

16. The Right Mix High Touch 16

17. High TechTouch Testing www.verybestbaking.com Wave –wave.webaim.org Jim Thatcher’s Favelet’s jimthatcher.com/favelets Web Developer (Firefox Extension) addons.mozilla.org/en-US/firefox/addon/60 Accessibility Evaluator addons.mozilla.org/en-US/firefox/addon/accessibility- evaluation-toolb/ Juicy Studio Accessibility Toolbar addons.mozilla.org/en-US/firefox/addon/juicy-studio- accessibility-too Headings Map http://addons.mozilla.org/en- us/firefox/addon/headingsmap/ 17

18. Very Best Baking Home Page 18

19. Smoke Test Does this page have OBVIOUS Accessibility Issues?

20. WAVE Go to http://wave.webaim.org/ Type in URL to test Press “WAVE this page” button

21. WAVE - 7 Accessibility Errors! 21

22. Meaningful Alt

23. Images & Jim Thatcher’s Favelets Install Jim Thatcher’s Favelet’s in Firefox – jimthatcher.com/favelets/ Find “Images” menu on JT Favelets and select “Active Images” 23

24. 24

25. Web Developer Toolbar Install Web Developer Toolbar in Firefox Open Firefox and Select “Replace Images with ALT Attributes” 25

26. Check Home Page with Images Replaced by ALT 26

27. Color Contrast

28. FAE & Color Contrast Install Functional Accessibility Evaluator (FAE) in FireFox addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/ Select “Color Contrast ” from Style (on FAE toolbar) 28

29. FAE Color Contrast Issues 29

30. Meaningful Link Text

31. FAE & Link Text Accessibility Evaluator in FireFox Select “Links ” from Navigation (on FAE toolbar) 31

32. FAE & Link Text 32

33. Heading Structure

34. Headings Map Install Heading Map plugin in Firefox –addons.mozilla.org/en-us/firefox/addon/headingsmap Select “Headings Map” from the Tools menu

35. Headings Map

36. ARIA Landmarks

37. Juicy Studios Accessibility Toolbar Install Juicy Studios Accessibility Toolbar plugin in Firefox –addons.mozilla.org/en-US/firefox/addon/juicy-studio- accessibility-too Select “Document Landmarks” from the ARIA menu 37

38. Juicy Studios Accessibility Toolbar 38

39. High TechTouch Testing www.verybestbaking.com Wave –wave.webaim.org Jim Thatcher’s Favelet’s jimthatcher.com/favelets Web Developer (Firefox Extension) addons.mozilla.org/en-US/firefox/addon/60 Accessibility Evaluator addons.mozilla.org/en-US/firefox/addon/accessibility- evaluation-toolb/ Juicy Studio Accessibility Toolbar addons.mozilla.org/en-US/firefox/addon/juicy-studio- accessibility-too Headings Map http://addons.mozilla.org/en- us/firefox/addon/headingsmap/ 39

40. Page 40

41. Demo of FireEyes Accessibility Testing Tool 41

42. Using FireEyes to Test for Color Contrast 42

43. FireEyes Color Contrast Results 43

44. Your FireEyes Toolset 44

45. The Right Mix High Touch 45

46. Shoestring Testing Plan 1.Home Page –Smoke Test 2.Representative Pages –Page by Page Testing Tool(s) –Expert Functionality Testing No Eyes – Screenreader No Ears – No Sound No Hands – Keyboard Only 46

47. Practical Testing Plan 1.Comprehensive Testing –High Tech Enterprise Accessibility Scans 2.Representative Pages –High TouchTech Page by Page Testing Tools –High Touch Expert Functionality Testing –Screenreader –No Sound –Keyboard Only 3.Key User Paths –High Touch Hands-on Accessibility Testing 47

48. No Sight No Sound No Mouse No Problem Equal Access for All