web accessibility: mastering the essentials for compliance
DESCRIPTION
Web Accessibility: Mastering the Essentials for Compliance. Annie Bélanger Liam Morland May 2013. The power of the Web is in its universality . Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, inventor of the World Wide Web. - PowerPoint PPT PresentationTRANSCRIPT
Web Accessibility: Mastering the Essentials
for ComplianceAnnie Bélanger
Liam MorlandMay 2013
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, inventor of the World Wide Web
Types of Impairment & Impacts
• Vision• Hearing• Motor• Cognitive• Photo epilepsy
WCAG 2.0 Conformance Levels• A bumpy ramp = Level A
It's possible to get in but with effort to get over the bumps.
• A smooth ramp = Level AA Easier to get in as the bumps have been taken away.
• A traction ramp = Level AAA Users are assisted with getting in.
POUR - Perceivable
POUR - Operable
POUR - Understandable
POUR - Robust
TECHNIQUES
Favourite VacationsNew York City
• Eat some pizza, see a Broadway show, and take a walk around Central Park.
Switzerland• Snow• Cheese• Chocolate
What more could you ask for?
<h1>Favourite Vacations</h1><h2>New York City</h2><p>Eat some pizza, see a Broadway show, and take a walk around Central Park.</p><h2>Switzerland</h2><ul><li>Snow</li><li>Cheese</li><li>Chocolate</li></ul><p>What more could you ask for?</p>
POUR – 1.1 Text Alternatives
• Communicate meaning briefly • Do not repeat in adjacent text• Skip “Image of”• Indicate if screenshot…• Use proper grammar
POUR – 1.2 Time-based Media• Transcripts for audio • Described video
POUR – 1.3 Adaptable • Demo
– http://www.lib.uwaterloo.ca/AboutLibrary/laptops.html
– http://www.lib.uwaterloo.ca/AboutLibrary/laptops.html
– https://uwaterloo.ca/about/– https://uwaterloo.ca/
POUR – 1.4 Distinguishable• Do not rely only colour
• Audio controllable
POUR – 2.4 Navigable
• Skip links• Consistency• Structured order• Page title• Purpose-driven
link naming
POUR – 3.1 Readable• Add the appropriate language attribute
<body lang=“en”>
<div lang=“fr”>
POUR – 3.2 Predictable• No change of context
POUR – 3.3 Input Assistance• Input errors are identified• Have proper form labels:
Search: <input type=“text” ...>
<label for=“search_terms”>Search:</label><input id=“search_terms” type=“text” ...>
POUR – 4.1 Compatible• Ensure HTML validates• Use HTML elements as intended
• Other things to keep in mind!– Site should work without Javascript– Use HTML, not PDF, Word, Flash, etc.
TESTING
Testing Protocol• Break it down• Do it often• Do it early• Just do it!
Testing Tool• Validator (not sufficient on their own)• Fangs screen reader emulator• NVDA• WAVE Toolbar (http://wave.webaim.org/)
Questions?Annie.belanger @ uwaterloo.ca Lkmorland @ uwaterloo.ca
Resources• uWaterloo Web Accesibility Resources (
http://uwaterloo.ca/web-resources/resources/accessibility)
• WCAG Quick Reference (http://www.w3.org/WAI/WCAG20/quickref/)
• WebAIM (http://webaim.org/) – Simplified WCAG 2.0 list (http://
webaim.org/standards/wcag/checklist)
Resources• Colour contrast is Level AA, but great early
on!– JuicyStudio (colour contrast) website and
Firefox extension (http://juicystudio.com/services/luminositycontrastratio.php)