Introduction to Accessibility Testing - CSUN14

3,730 views

Published on

Intended for people new to accessibility testing, this session details freely available testing tools and how they relate to identifying different user issues.

Published in: Technology

Introduction to Accessibility Testing - CSUN14

  1. 1. Getting Started with Accessibility Testing @PatrickDunphy #CSUN14 Friday, March 21, 2014
  2. 2. Who am I?
  3. 3. I Work Here I Co-Lead Here
  4. 4. I Live Here
  5. 5. You may have heard of it...
  6. 6. Getting Started with Accessibility Testing
  7. 7. MAYORAL CAGE MATCH Forget Politics. Accessibility FTW!!!
  8. 8. HOW? 1. Identify Issues 2. Discover Test Tools 3. Manual Testing 4. Perform Tests 5. Determine Winner
  9. 9. WHY? • It’s about people • Information Source • Gain Supporters • Direct Communication • AODA Legislation
  10. 10. • Limited Mobility • Cognitive Challenges • Colour Blind • Seizure Disorders • Deaf / Hearing Impaired • Visually Impaired • Total Blindness DIFFERENT USERS DIFFERENTNEEDS • Voice Interaction • Clear Defined Goals • Colour Contrast • Clean Animation • Closed Captions • Screen Magnification • Screen Readers
  11. 11. Sample Accessibility Testing Toolkit • WAVE • FireEyes • Web Developer Toolbar • Functional Accessibility Evaluator • Juicy Studio Plugin • Firebug / Code Inspector • Fangs • Web Accessibility Toolbar (IE) • Colour Contrast Analyzer • Jim Thatcher Favlets
  12. 12. • Tools catch < 30% errors • Keyboard Functionality • High Contrast Mode • Form Labels / Errors • Code Inspection Accessibility Requires Manual Testing
  13. 13. 1. Keyboard 2. Headings 3. Images 4. Links 5. Forms 6. Colour 7. CSS 8. JavaScript 9. Multimedia 9 Rounds
  14. 14. Round 1 KEYBOARD
  15. 15. Possible Tools: 1. Keyboard 2. Keyboard 3. Keyboard Keyboard Issues: • Logical Order • Focus Indicators • Consistent Behaviour • Bypass Blocks The Pointerless Web http://weba.im/pointerlessweb
  16. 16. KEYBOARD Testing Demo
  17. 17. Round 1 Judges Keyboard
  18. 18. Round 2 HEADINGS
  19. 19. Possible Tools: • FAE (functional accessibility evaluator) • Juicy Studio • WAVE • FANGS Heading Issues: • Site Structure • Visual Indication • Follow Hierarchy • Used by AT The HTML5 Document Outline http://weba.im/headerfiction
  20. 20. Headings Testing Demo
  21. 21. Round 2 Judges Headings
  22. 22. Round 3 IMAGES
  23. 23. Possible Tools: • WAVE • High Contrast Mode • Web Dev Toolbar • Favlets Image Issues: • Alt Attributes • Context + Function • Make sense w/o • Baked Text Text Alternative Decision Tree http://weba.im/alternativetree
  24. 24. Images Testing Demo
  25. 25. Round 3 Judges Images
  26. 26. Round 4 LINKS
  27. 27. Possible Tools: • FAE (functional accessibility evaluator) • Fangs • Juicy Studio Link Issues: • Improper Markup • Ambiguous Link Text • Consistency • Cognitive Load Links & Hypertext http://weba.im/linktext
  28. 28. Links Testing Demo
  29. 29. Round 4 Judges Links
  30. 30. Round 5 FORMS
  31. 31. Possible Tools : • Keyboard • Web Dev Toolbar • Wave Form Issues : • Required Fields • Logical Order • Grouped Items • Label : Input • User Feedback Improving the Accessibility of Forms http://weba.im/canadaforms
  32. 32. Form Testing Demo
  33. 33. Round 5 Judges Forms
  34. 34. Round 6 COLOUR
  35. 35. Possible Tools : 1. Colour Contrast Analyser 2. Juicy Studio 3. WAVE Colour Issues : • Insufficient Contrast • Sole means of info • Gradients • Images / background Colour Accessibility http://weba.im/24color
  36. 36. Colour Testing Demo
  37. 37. Round 6 Judges Colour
  38. 38. Round 7 CSS
  39. 39. Possible Tools : • Web Dev Toolbar • WAVE • WAT (IE) CSS Issues : • Logical Order • Focus Indicators • CSS Content • Sprites The Content CSS Property and Accessibility http://weba.im/styleoversubstance
  40. 40. CSS Testing Demo
  41. 41. Round 7 Judges CSS
  42. 42. Round 8 JavaScript
  43. 43. Possible Tools : • WAVE Toolbar • FireEyes JavaScript Issues : • Dynamic Content • Inappropriate Use • Modals / Menus • Controlling the user Accessible JavaScript http://webaim.org/techniques/javascript/
  44. 44. JavaScript Testing Demo
  45. 45. Round 8 Judges JavaScript
  46. 46. Round 9 Multimedia
  47. 47. Tools to use: • Keyboard • Speakers • Visual Multimedia Issues : • Autoplay • Captioning • Transcripts • Keyboard Access BBC Multimedia Standards http://weba.im/bbcmedia
  48. 48. Multimedia Testing Demo
  49. 49. Round 9 Judges Multimedia
  50. 50. My Personal Favourite - WAVE Wave Features: • Results Summary • CSS Toggle • Contrast Summary • Document Outline • Target / Documentation • Code Inspector
  51. 51. And the Winner is...
  52. 52. 10 Step Test Plan 1. Compile UI 2. Sanity Test 3. Validate Code 4. Apply Tools 5. Test Subjectivity 6. Use Keyboard 7. Use Screenreader 8. Verify Target 9. User Testing 10. Rinse & Repeat
  53. 53. Links & Resources • accessiq.org • blog.paciellogroup.com • html5accessibility.com • dboudreau.tumblr.com • deque.com/blog/top-web-accessibility- resources • simplyaccessible.com/archives • w3.org/WAI • webaccessibility.com • webaim.org
  54. 54. Final Words • YOU are the best test tool • Offer PRAGMATIC solutions • ENGAGE the community • Avoid FUD (fear, uncertainty, doubt) • Be a SPONGE • SHARE your knowledge
  55. 55. Happy Testing! @PatrickDunphy

×