Accessibility Testing 101
•
4 gefällt mir•4,335 views
A beginners guide to accessibility testing. An overview of common mistakes websites make and highlighting some easy to use tools that anyone can incorporate into their work. Presented at www.AccessibilityCalgary.com on May 12, 2013.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Accessibility Testing 101
Ähnlich wie Accessibility Testing 101 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Accessibility Testing 101
- 2. Who am I? • 14 years working on the web • Working with Web Accessibility since ‘07 (Bank of America / WebAIM) • Senior UI Developer / Accessibility Specialist with CBC • Roll call
- 3. Why Test for Accessibility? • Different user needs • Larger audience reach • Be social responsible • Aids usability • Better & more maintainable code • Search engines benefits • Good publicity, avoid legal fees & bad press
- 4. General Accessibility Issues • Keyboard support • Sensory cues • Consistent navigation • No Context • Dynamic content • Controlling user experience
- 5. Text & Content Issues • Poor content structure • Inappropriate markup • Source order • Absolute font sizes • Poor contrast • Inappropriate link text • Language undefined
- 6. Common image problems • Misuse of alt text • Missing alt attributes • Charts and graphs • CSS images • Title attributes • Baked image text (brand/logo exception)
- 7. Form misuse • Unlabelled controls • Common inputs • Required fields • onchange event • focus change • Poor error handling
- 9. Responsive = Accessible? • Responsive aids Accessibility • Different devices handle content differently • Needs to be planned accordingly
- 10. Testing - Where do I start? 1. Compile UI component list by type – modules, containers, templates, pages 2. Prioritize based on frequency & prominence 3. Include elements typically challenging for persons with disabilities. 4. Determine target goal.
- 11. Developer’s Test Plan 1. Sanity Test w/o CSS & Images 2. Validate your code 3. Validate for Accessibility • apply testing tools (at least 2) & verify results • contrast/context/order/alternatives 4. Check keyboard Accessibility 5. Test with a screen reader (JAWS, NDVA, VoiceOver) 6. Check against WCAG 2.0 7. Conduct user testing 8. Rinse & Repeat
- 13. Disable CSS & Images
- 14. Use the Keyboard
- 15. WebAIM WAVE Validator • 76 errors • 191 alerts to verify • 30 contrast errors • Style / No style • Maps to WCAG • Show outline https://wave.webaim.org/
- 16. Wave Toolbar • Version 4 • Detected 45 errors • Outline reveals 10 headers – all h1 • New release for Firefox & Chrome coming soon https://addons.mozilla.org/en-us/firefox/addon/wave-toolbar/
- 17. WAT TOOLBAR (IE) • Multiple tools • Validators • Color tests • Content Structure • Document Info • Accessibility API www.paciellogroup.com/resources/wat-ie-about.html
- 18. Color Contrast Analyser Regular Grey Scale www.paciellogroup.com/resources/contrastAnalyser
- 19. Fangs Screen Reader Emulator • Not a substitute for real screen readers • Useful for headings & link text https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/
- 20. Firefox Accessibility Extension • 798 warning • 14 failures • 4 notes • Many other features https://addons.mozilla.org/en-us/firefox/addon/accessibility-evaluation-toolb/
- 21. Other Testing Tools • Juicy Studio • Jim Thatcher Favelets • FireEyes • Firebug • NoCoffee Plugin • aChecker • Web Developer Toolbar • High Contrast Mode • JAWS, NDVA Non-A11y Specific • Screen Cap utility • Screen recorder
- 22. Testing Takeaways • Automated testing/tools will only catch 25-30% of potential errors on a site • Always requires manual testing • Subjective by nature • Won’t identify issues revealed by real users with disabilities • Not one size fits all – different types of sites require different testing
- 23. Final Words of Advice • You are the most important testing tool • Don't just say no – offer solutions • Engage the community • Don't fear what you don't know • Be a sponge • Share your knowledge
Hinweis der Redaktion
- Developers?Designers?IA / UX?Project/Product Managers?Writers and Content Authors?Other?Accessibility testing experience?
- Keyboard Access – no focus styles; gateway to ATContext – Click Here in links modeRepeats – Adjactent content; duplicate links, text. EtcSensory clues – color shape or orientation as feedbackConsistent – navs remain the same; common functionalityDynamic content – can cause screen readers to behave erratically; guide focusControl user behaviour – onchange event, auto forwarding fields, new window, open pdf/word/etc without notice
- Content order = source order = tab order
- PWD issuesImages & other non-text formats - Forms - Tables - Interface elements relying on client-side scripting - Frames and i-frames
- Validate CodeAssistive technology relies on properly formatted standards based HTML2. Validate for Accessibility 4c’s – content order, context, consistency & contrast- images – functionalvs decorative is content in a logical order?- ensure color alone isn't relied to convey meaning- heading sequence must be in proper order.. h1, h2, h3.. no skipping levels- ensure text can be resizes; test @ 200% of original size- ensure non-english elements have "lang" attribute when necessary3. Check Keyboard Accessibility- are you able to reach & interact with all contentis it obvious where you are?Bypass repetitive (nav) or long lists of content (tables, lists)ajax notification for non visual users?4. Test in a Screen Reader- Fangs toolbar- use JAWS & NDVA- most common ways 2 navigate A) navigate by headings B) Navigate by links- listen for repetitive content- all forms controls require a 1:1 label ratio- tables must have column, row scope defined- it link is in a new window or non-html format (i.e. word doc/pdf) user must be informed5. Check for WCAG 2.0 Compliance6. Conduct User TestingReal users of AT to test site- blind users- mobility impaired users- aged users- keyboard only users7. Repeat 1-6 any time changes are made.
- The most basic accessibility test is disable CSS & Images..Is your site still understandable?Results show:No skip links - Long list of linksProper use of alt text for the most part
- Red – errorYellow – require checkingicon guideDoc outlinestyle/no styleContrast errorsShows wcag relationship Tools – apivsdomTest w/more than one
- Walk through contentShow iconr guide
- Show no coffee in chrome
- Auto tests are good indication of larger issues