Accessibility Testing 101

2,004 views

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,004
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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
  • Accessibility Testing 101

    1. 1. Who am I?• 14 years working on the web• Working with Web Accessibility since ‘07(Bank of America / WebAIM)• Senior UI Developer / AccessibilitySpecialist with CBC• Roll call
    2. 2. Why Test for Accessibility?• Different user needs• Larger audience reach• Be social responsible• Aids usability• Better & more maintainablecode• Search engines benefits• Good publicity, avoid legalfees & bad press
    3. 3. General Accessibility Issues• Keyboard support• Sensory cues• Consistent navigation• No Context• Dynamic content• Controlling userexperience
    4. 4. Text & Content Issues• Poor content structure• Inappropriate markup• Source order• Absolute font sizes• Poor contrast• Inappropriate link text• Language undefined
    5. 5. Common image problems• Misuse of alt text• Missing alt attributes• Charts and graphs• CSS images• Title attributes• Baked image text(brand/logo exception)
    6. 6. Form misuse• Unlabelled controls• Common inputs• Required fields• onchange event• focus change• Poor error handling
    7. 7. Responsive = Accessible?http://www.youtube.com/watch?v=ecWi9CPNYGM
    8. 8. Responsive = Accessible?• Responsive aidsAccessibility• Different deviceshandle contentdifferently• Needs to be plannedaccordingly
    9. 9. Testing - Where do I start?1. Compile UI component list by type – modules,containers, templates, pages2. Prioritize based on frequency & prominence3. Include elements typically challenging for personswith disabilities.4. Determine target goal.
    10. 10. Developer’s Test Plan1. Sanity Test w/o CSS & Images2. Validate your code3. Validate for Accessibility• apply testing tools (at least 2) & verify results• contrast/context/order/alternatives4. Check keyboard Accessibility5. Test with a screen reader (JAWS, NDVA, VoiceOver)6. Check against WCAG 2.07. Conduct user testing8. Rinse & Repeat
    11. 11. TestingDemonstrations
    12. 12. Disable CSS & Images
    13. 13. Use the Keyboard
    14. 14. WebAIM WAVE Validator• 76 errors• 191 alerts to verify• 30 contrast errors• Style / No style• Maps to WCAG• Show outlinehttps://wave.webaim.org/
    15. 15. Wave Toolbar• Version 4• Detected 45 errors• Outline reveals 10headers – all h1• New release for Firefox& Chrome coming soonhttps://addons.mozilla.org/en-us/firefox/addon/wave-toolbar/
    16. 16. WAT TOOLBAR (IE)• Multiple tools• Validators• Color tests• Content Structure• Document Info• Accessibility APIwww.paciellogroup.com/resources/wat-ie-about.html
    17. 17. Color Contrast AnalyserRegular Grey Scalewww.paciellogroup.com/resources/contrastAnalyser
    18. 18. Fangs Screen Reader Emulator• Not a substitute for realscreen readers• Useful for headings & linktexthttps://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/
    19. 19. Firefox Accessibility Extension• 798 warning• 14 failures• 4 notes• Many otherfeatureshttps://addons.mozilla.org/en-us/firefox/addon/accessibility-evaluation-toolb/
    20. 20. Other Testing Tools• Juicy Studio• Jim Thatcher Favelets• FireEyes• Firebug• NoCoffee Plugin• aChecker• Web Developer Toolbar• High Contrast Mode• JAWS, NDVANon-A11y Specific• Screen Cap utility• Screen recorder
    21. 21. Testing Takeaways• Automated testing/tools will only catch 25-30% ofpotential errors on a site• Always requires manual testing• Subjective by nature• Won’t identify issues revealed by real users withdisabilities• Not one size fits all – different types of sites requiredifferent testing
    22. 22. Final Words of Advice• You are the most important testing tool• Dont just say no – offer solutions• Engage the community• Dont fear what you dont know• Be a sponge• Share your knowledge
    23. 23. Thank you@patrickdunphy

    ×