Introduction to Accessibility Testing - CSUN14
Download as PPTX, PDF10 likes5,408 views
The document provides a comprehensive guide on accessibility testing, outlining key issues that can arise across different areas such as keyboard, headings, images, links, forms, color, CSS, JavaScript, and multimedia. It details various tools and techniques for each testing area and emphasizes the importance of manual testing for effective accessibility checks. The presentation concludes with a 10-step test plan and encourages testers to engage with the community and continuously improve their knowledge on accessibility.
Introduction to Accessibility Testing - CSUN14
- 1. Getting Started with Accessibility Testing @PatrickDunphy #CSUN14 Friday, March 21, 2014
- 2. Who am I?
- 3. I Work Here I Co-Lead Here
- 4. I Live Here
- 5. You may have heard of it...
- 6. Getting Started with Accessibility Testing
- 7. MAYORAL CAGE MATCH Forget Politics. Accessibility FTW!!!
- 8. HOW? 1. Identify Issues 2. Discover Test Tools 3. Manual Testing 4. Perform Tests 5. Determine Winner
- 9. WHY? • It’s about people • Information Source • Gain Supporters • Direct Communication • AODA Legislation
- 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. 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. • Tools catch < 30% errors • Keyboard Functionality • High Contrast Mode • Form Labels / Errors • Code Inspection Accessibility Requires Manual Testing
- 13. 1. Keyboard 2. Headings 3. Images 4. Links 5. Forms 6. Colour 7. CSS 8. JavaScript 9. Multimedia 9 Rounds
- 14. Round 1 KEYBOARD
- 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
- 18. Round 2 HEADINGS
- 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
- 22. Round 3 IMAGES
- 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
- 26. Round 4 LINKS
- 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
- 30. Round 5 FORMS
- 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
- 34. Round 6 COLOUR
- 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
- 38. Round 7 CSS
- 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. CSS Testing Demo
- 43. Possible Tools : • WAVE Toolbar • FireEyes JavaScript Issues : • Dynamic Content • Inappropriate Use • Modals / Menus • Controlling the user Accessible JavaScript http://webaim.org/techniques/javascript/
- 47. Tools to use: • Keyboard • Speakers • Visual Multimedia Issues : • Autoplay • Captioning • Transcripts • Keyboard Access BBC Multimedia Standards http://weba.im/bbcmedia
- 50. My Personal Favourite - WAVE Wave Features: • Results Summary • CSS Toggle • Contrast Summary • Document Outline • Target / Documentation • Code Inspector
- 51. And the Winner is...
- 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. 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. 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