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

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.

P OUR - Perceivable

P O UR - Operable

PO U R - Understandable

POU R - Robust

TECHNIQUES

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?

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?

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

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

P OUR – 1.3 Adaptable Demo – ps.htmlhttp:// ps.html – ps.htmlhttp:// ps.html – –

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

P O UR – 2.1 Keyboard Accessible Demo –

P O UR – 2.2 Enough Time Avoid time limit

P O UR – 2.3 Seizures

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

PO U R – 3.1 Readable Add the appropriate language attribute

PO U R – 3.2 Predictable No change of context

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

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.

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 (

Questions? uwaterloo.ca uwaterloo.ca

Resources uWaterloo Web Accesibility Resources ( resources/resources/accessibility) resources/resources/accessibility WCAG Quick Reference ( WebAIM ( –Simplified WCAG 2.0 list (

Resources Colour contrast is Level AA, but great early on! –JuicyStudio (colour contrast) website and Firefox extension ( rastratio.php) rastratio.php