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.
Handwritten Text Recognition for manuscripts and early printed texts
Accessibility Testing 101
1.
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)
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
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
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