1 / 48

Practical Accessibility Testing

Practical Accessibility Testing. The High Tech + High Touch Recipe for Success. Photo by StarsApart. Glenda the Goodwitch. webstandards.org knowbility.org deque.com. Web Accessibility Testing Recipe. Web development process. Accessible web development. Equip

margie
Download Presentation

Practical Accessibility Testing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  3. Web Accessibility Testing Recipe

  4. Web development process

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

  6. Accessibility Testing is NOT Icing

  7. Cost to Fix Accessibility Defects

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

  9. 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. High Tech +High Touch Accessibility Testing Tools Page by Page Testing Tools

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

  12. High Tech Accessibility Testing Tools Enterprise Accessibility Testing Tools

  13. The Right Mix High Touch

  14. 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/

  15. Very Best Baking Home Page

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

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

  18. WAVE - 7 Accessibility Errors!

  19. Meaningful Alt

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

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

  22. Check Home Page with Images Replaced by ALT

  23. Color Contrast

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

  25. FAE Color Contrast Issues

  26. Meaningful Link Text

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

  28. FAE & Link Text

  29. Heading Structure

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

  31. Headings Map

  32. ARIA Landmarks

  33. 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

  34. Juicy Studios Accessibility Toolbar

  35. 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/

  36. Demo of FireEyes Accessibility Testing Tool

  37. Using FireEyes to Test for Color Contrast

  38. FireEyes Color Contrast Results

  39. Your FireEyes Toolset

  40. The Right Mix High Touch

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

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

  43. No SightNo SoundNo MouseNo ProblemEqual Access for All

More Related