Accessibility Testing 101

  • 1,365 views
Uploaded 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. …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,365
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 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. 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. General Accessibility Issues• Keyboard support• Sensory cues• Consistent navigation• No Context• Dynamic content• Controlling userexperience
  • 4. Text & Content Issues• Poor content structure• Inappropriate markup• Source order• Absolute font sizes• Poor contrast• Inappropriate link text• Language undefined
  • 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. Form misuse• Unlabelled controls• Common inputs• Required fields• onchange event• focus change• Poor error handling
  • 7. Responsive = Accessible?http://www.youtube.com/watch?v=ecWi9CPNYGM
  • 8. Responsive = Accessible?• Responsive aidsAccessibility• Different deviceshandle contentdifferently• Needs to be plannedaccordingly
  • 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. 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. TestingDemonstrations
  • 12. Disable CSS & Images
  • 13. Use the Keyboard
  • 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. 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. WAT TOOLBAR (IE)• Multiple tools• Validators• Color tests• Content Structure• Document Info• Accessibility APIwww.paciellogroup.com/resources/wat-ie-about.html
  • 17. Color Contrast AnalyserRegular Grey Scalewww.paciellogroup.com/resources/contrastAnalyser
  • 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. Firefox Accessibility Extension• 798 warning• 14 failures• 4 notes• Many otherfeatureshttps://addons.mozilla.org/en-us/firefox/addon/accessibility-evaluation-toolb/
  • 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. 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. 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. Thank you@patrickdunphy