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.”
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)
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
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
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
23.
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
29. November 16, 2013
OCAD UNIVERSITY
Toronto, Ontario, Canada
Register Online
http://www.AccessibilityCampTo.org
Notas del editor
Accessibility for Ontarians with Disabilities ActWeb Content Accessibility Guidelines – version 1 1999, version 2 2008 – now ISO standardBritish StandardsThe 21st Century Communications and Video Accessibility Act of 2010