1. Web Accessibility: Mastering the Essentials for Compliance Annie Bélanger Liam Morland May 2013

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

3. Types of Impairment & Impacts Vision Hearing Motor Cognitive Photo epilepsy

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

5. P OUR - Perceivable

6. P O UR - Operable

7. PO U R - Understandable

8. POU R - Robust

9. TECHNIQUES

10. Favourite Vacations New 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?

11. Favourite Vacations New 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?

12. P OUR – 1.1 Text Alternatives Communicate meaning briefly Do not repeat in adjacent text Skip “Image of” Indicate if screenshot… Use proper grammar

15. P OUR – 1.2 Time-based Media Transcripts for audioDescribed video

16. P OUR – 1.3 Adaptable Demo –http://www.lib.uwaterloo.ca/AboutLibrary/lapto ps.htmlhttp://www.lib.uwaterloo.ca/AboutLibrary/lapto ps.html –http://www.lib.uwaterloo.ca/AboutLibrary/lapto ps.htmlhttp://www.lib.uwaterloo.ca/AboutLibrary/lapto ps.html –https://uwaterloo.ca/about/https://uwaterloo.ca/about/ –https://uwaterloo.ca/https://uwaterloo.ca/

17. P OUR – 1.4 Distinguishable Do not rely only colour Audio controllable

18. P O UR – 2.1 Keyboard Accessible Demo –https://uwaterloo.ca/https://uwaterloo.ca/

19. P O UR – 2.2 Enough Time Avoid time limit

20. P O UR – 2.3 Seizures

21. P O UR – 2.4 Navigable Skip links Consistency Structured order Page title Purpose-driven link naming

22. PO U R – 3.1 Readable Add the appropriate language attribute

23. PO U R – 3.2 Predictable No change of context

24. PO U R – 3.3 Input Assistance Input errors are identified Have proper form labels: Search:

25. POU R – 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.

26. TESTING

27. Testing Protocol Break it down Do it often Do it early Just do it!

28. Testing Tool Validator (not sufficient on their own) Fangs screen reader emulator NVDA WAVE Toolbar (http://wave.webaim.org/)http://wave.webaim.org/

29. Questions? Annie.belanger @ uwaterloo.ca Lkmorland @ uwaterloo.ca

30. Resources uWaterloo Web Accesibility Resources (http://uwaterloo.ca/web- resources/resources/accessibility)http://uwaterloo.ca/web- resources/resources/accessibility WCAG Quick Reference (http://www.w3.org/WAI/WCAG20/quickref/)http://www.w3.org/WAI/WCAG20/quickref/ WebAIM (http://webaim.org/)http://webaim.org/ –Simplified WCAG 2.0 list (http://webaim.org/standards/wcag/checklist)http://webaim.org/standards/wcag/checklist

31. Resources Colour contrast is Level AA, but great early on! –JuicyStudio (colour contrast) website and Firefox extension (http://juicystudio.com/services/luminositycont rastratio.php)http://juicystudio.com/services/luminositycont rastratio.php