Web Accessibility: Mastering the Essentials for Compliance
description
Transcript of Web Accessibility: Mastering the Essentials for Compliance
![Page 1: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/1.jpg)
Web Accessibility: Mastering the Essentials
for ComplianceAnnie Bélanger
Liam MorlandMay 2013
![Page 2: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/2.jpg)
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
![Page 3: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/3.jpg)
Types of Impairment & Impacts
• Vision• Hearing• Motor• Cognitive• Photo epilepsy
![Page 4: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/4.jpg)
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.
![Page 5: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/5.jpg)
POUR - Perceivable
![Page 6: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/6.jpg)
POUR - Operable
![Page 7: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/7.jpg)
POUR - Understandable
![Page 8: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/8.jpg)
POUR - Robust
![Page 9: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/9.jpg)
TECHNIQUES
![Page 10: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/10.jpg)
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?
![Page 11: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/11.jpg)
<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>
![Page 12: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/12.jpg)
POUR – 1.1 Text Alternatives
• Communicate meaning briefly • Do not repeat in adjacent text• Skip “Image of”• Indicate if screenshot…• Use proper grammar
![Page 13: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/13.jpg)
![Page 14: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/14.jpg)
![Page 15: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/15.jpg)
POUR – 1.2 Time-based Media• Transcripts for audio • Described video
![Page 16: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/16.jpg)
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/
![Page 17: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/17.jpg)
POUR – 1.4 Distinguishable• Do not rely only colour
• Audio controllable
![Page 21: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/21.jpg)
POUR – 2.4 Navigable
• Skip links• Consistency• Structured order• Page title• Purpose-driven
link naming
![Page 22: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/22.jpg)
POUR – 3.1 Readable• Add the appropriate language attribute
<body lang=“en”>
<div lang=“fr”>
![Page 23: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/23.jpg)
POUR – 3.2 Predictable• No change of context
![Page 24: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/24.jpg)
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” ...>
![Page 25: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/25.jpg)
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.
![Page 26: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/26.jpg)
TESTING
![Page 27: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/27.jpg)
Testing Protocol• Break it down• Do it often• Do it early• Just do it!
![Page 28: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/28.jpg)
Testing Tool• Validator (not sufficient on their own)• Fangs screen reader emulator• NVDA• WAVE Toolbar (http://wave.webaim.org/)
![Page 29: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/29.jpg)
Questions?Annie.belanger @ uwaterloo.ca Lkmorland @ uwaterloo.ca
![Page 30: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/30.jpg)
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)
![Page 31: Web Accessibility: Mastering the Essentials for Compliance](https://reader036.fdocuments.us/reader036/viewer/2022062310/5681667a550346895dda1ca7/html5/thumbnails/31.jpg)
Resources• Colour contrast is Level AA, but great early
on!– JuicyStudio (colour contrast) website and
Firefox extension (http://juicystudio.com/services/luminositycontrastratio.php)