1. Intro to
Accessibility
TESTING
@patrickdunphy | #a11ycampdc | OCTOBER 12, 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.”
(No offense TimBL!)
- Sir Tim Berners Lee

5. Dr. Zhang Xu
• Orthopedic surgeon
• Life changing incident
• Chinese Disabled Activist
“If anybody asks me what the Internet means to me, I will tell him without
hesitation: To me (a quadriplegic) the Internet occupies the most important part
in my life. It is my feet that can take me to any part of the world; it is my hands
which help me to accomplish my work; it is my best friend - it gives my life
meaning.”

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

8. 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


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

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

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

13. • Responsive aids
Accessibility
• Different devices
handle content
differently
• Needs to be planned
accordingly

14. 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.

15. 1.
2.
3.
4.
5.
6.
7.
8.
Sanity Test w/o CSS & Images
Validate your code
Validate for Accessibility
• apply testing tools (at least 2) & verify results
• contrast/context/order/alternatives
Check keyboard Accessibility
Test with a screen reader (JAWS, NDVA, VoiceOver)
Check against WCAG 2.0
Conduct user testing
Rinse & Repeat

17. API
Web Version
Toolbar

18. • 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.

19. 76 errors
 191 alerts to verify
 30 contrast errors
 Style / No style
 Maps to WCAG
 Show outline

http://wave.webaim.org

20. • Currently firefox only (ChromeTBD)
• Evaluation includes scripting
http://wave.webaim.org/toolbar

21. 
45 errors

10 headers all h1
http://wave.webaim.org/toolbar

22. • V.1 released in March 2013
• Minimal cost ($0.04 - $0.025 / credit)
• XML / JSON
• Stand-alone Beta (Mac/Windows/Linux)
• Spider, URL Manager, Scheduler, etc.
http://wave.webaim.org/api

24. 
Not a substitute for
real screen readers

Useful for headings &
link text
https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/

25. • 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

26. 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

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

28. @PatrickDunphy

29. November 16, 2013
OCAD UNIVERSITY
Toronto, Ontario, Canada
Register Online
http://www.AccessibilityCampTo.org