As an invited speaker for World Usability Day in 2013, these slides feature are an introduction to Accessibility Testing for students in the Mount Royal University information design program.

1. ACCESSIBILITY TESTING 101
@PatrickDunphy
|
World Usability Day
November 14, 2013

2. Transplanted
Newfoundlander
Proud
Daddy
Embarrasses wife
at hockey games

3. The
Beginning
The REAL
Beginning
The
Present

4. “The power of the web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.”
Sir Tim Berners-Lee, Inventor of the WWW

5. Different users. Different needs.
• Closed Captions
• Meaningful Link Text
• Alternative Navigation
• Relative Sizing
• Logical Content Order

6. Introduce
Free Testing Tools
That are available to
and are
Anyone
Easy To Use

7. •
•
•
•
•
•
Keyboard support
Sensory cues
Consistent navigation
No Context
Dynamic content
Controlling user
experience

8. •
•
•
•
•
•
•
Poor content structure
Inappropriate markup
Source order
Absolute font sizes
Poor contrast
Inappropriate link text
Language undefined

9. •
•
•
•
•
•
Misuse of alt text
Missing alt attributes
Charts and graphs
CSS images
Title attributes
Baked image text
(brand/logo exception)

10. 1. Compile UI components – modules,
containers, templates, pages
2. Prioritize frequency & prominence
3. Include elements typically challenging for
persons with disabilities.
4. Determine your target goal.

11. 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
6. Verify against target goal
7. Conduct user testing
8. Rinse & Repeat

12. http://www.instra.com

13. http://weba.im/webdevtoolbar

14. http://validator.w3.org/

15. API
Web Version
Toolbar

16. • Provides different views
• Determine target goal
• Summarizes results
• Instant Documentation
• Code inspector
* Wave is a tool to assist with evaluation, it’s not used to verify content is 100%
accessible.

17. 14 errors
 181 alerts to verify
 83 contrast errors
 Style / No style
 Maps to target
 Show outline

http://wave.webaim.org

18. 
526(!) errors

Evaluation includes
scripting

Firefox Toolbar only

Chrome release TBD
http://weba.im/toolbar

19. FANGS Toolbar

Useful quick test

Not a substitute for real
screen readers

Useful for headings & link
text
http://weba.im/fangs

20. Accessibility Toolbar
•
•
•
•
•
•
Mulitple test types
Report generator
Navigation
Text Equivalents
Scripting
Uses other tools
http://weba.im/fae

22. JAWS
http://weba.im/jawsdemo
VoiceOver
NVDA
http://nvaccess.org

23. AODA
– Accessibility for Ontarians with Disabilities Act
WCAG 2.0
– Web Content Accessibility Guideline
BS 8878
– British Standards
CVAA
– 21st Century Communications Video Accessibility Act
Section 508
– US Federal Accessibility Law
ADA
– American’s with Disabilities Act

24. Involve Real People with Real Disabilities
PWD using AT will reveal
undiscovered issues
Include Seniors

26. No silver bullet – only 25-30% of errors
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
•
•
•
•

27. Your keyboard
WAVE
Screen readers
FANGS plugin
WAT Toolbar (IE)
Colour Contrast Analyzer
FireEyes
Diagnostic.css
NoCoffee Plugin
Firebug, Web Dev Toolbar
High Contrast Mode
http://www.webaim.org
http://www.w3.org/WAI
https://atutor.ca
https://www.webaccessibility.com
http://www.webaxe.org
http://www.accessiq.org

28. • You are the most important testing tool
• Don't just say no, offer solutions
• Engage the community (befriend #a11y)
• Don’t fear what you don’t know
• BE A SPONGE
• Share your knowledge

29. @PatrickDunphy