Web Accessibility Mastering the Essentials for Compliance Annie
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.
POUR - Perceivable
P OUR - Operable
PO UR - 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?
<h 1>Favourite Vacations</h 1> <h 2>New York City</h 2> <p>Eat some pizza, see a Broadway show, and take a walk around Central Park. </p> <h 2>Switzerland</h 2> <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/About. Library/lapto ps. html – https: //uwaterloo. ca/about/ – https: //uwaterloo. ca/
POUR – 1. 4 Distinguishable • Do not rely only colour • Audio controllable
O P UR – 2. 1 Keyboard Accessible • Demo – https: //uwaterloo. ca/
P OUR – 2. 2 Enough Time • Avoid time limit
OUR – 2. 3 Seizures P
P • • • OUR – 2. 4 Navigable Skip links Consistency Structured order Page title Purpose-driven link naming
PO UR – 3. 1 Readable • Add the appropriate language attribute <body lang=“en”> <div lang=“fr”>
PO UR – 3. 2 Predictable • No change of context
PO UR – 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”. . . >
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 (http: //wave. webaim. org/)
Questions? Annie. belanger @ uwaterloo. ca Lkmorland @ uwaterloo. ca
Resources • u. Waterloo Web Accesibility Resources (http: //uwaterloo. ca/webresources/accessibility) • WCAG Quick Reference (http: //www. w 3. org/WAI/WCAG 20/quickref/) • Web. AIM (http: //webaim. org/) – Simplified WCAG 2. 0 list (http: //webaim. org/standards/wcag/checklist)
Resources • Colour contrast is Level AA, but great early on! – Juicy. Studio (colour contrast) website and Firefox extension (http: //juicystudio. com/services/luminositycont rastratio. php)
- Slides: 31
