Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415
description
Transcript of Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415
Making Your Web Site Accessible: AODA Compliance
Joanne Oud, Session 415
Overview
A. BackgroundB. Legislation & StandardsC. Common Errors D. How to Conform
A. BACKGROUND
Ontarians with Disabilities
15%
Disabilities Affecting Web Use
Common Assistive Technologies
B. LEGISLATION & STANDARDS
Ontario Standards
• AODA: how-to• Principles:– Dignity – Independence– Removing barriers
New Legislation on Web Sites
• Integrated Standard• Information and Communication section• June 2011
Comply with WCAG 2.0
Type of site/content TimelineAll sites Jan 1, 2014
New or substantially revised sites After Jan 1, 2012
Type of site/content Level TimelineNew content on existing sites
A Jan 1, 2012
New or substantially revised sites
A Jan 1, 2014
All content on all sites AA Jan 1, 2021
What It Applies To
“to websites and web content, including web-based applications, that an organization controls directly or through a contractual relationship that allows for modification of the product”
WHAT IS WCAG 2.0?
Good News
• Major international standard• Very specific• Lots of guidance• Relatively easy to check
Bad News
• Very specific• Relatively easy to check• Not used in U.S.• Most tools, advice doesn’t apply
WCAG 2.0: Four Major Principles
1. Perceivable2. Operable3. Understandable4. Robust
Each Principle Has Guidelines
2. Operable2.1 Accessible by keyboard2.2 Allow time to read and use content2.3 Avoid content known to cause seizures2.4 Help users find content
Each Guideline Has Subsections
Each Subsection Has Techniques
Techniques: Example #2
Each Technique Is Described
C. COMMON ERRORS
Research Project
• Question:– How well do Ontario library web sites currently
conform with WCAG 2.0?• Study population:– 64 library web sites (university, college, public)
• Method:– Automated testing using Total Validator &
Contrast Checker
Results: All Libraries
15 errors per page (average)
3
66
Error 1: Invalid Markup
• Markup doesn’t match doctype• Html/xhtml/css errors• Code not valid, well-formed
Error 2: Poor Contrast
<table> <tr> <td width="974px"> <div style="padding: 0px; border: solid 0 #cccccc; border-bottom-width: 1px;"> <table cellpadding="0" cellspacing="0"> <tr>
Error 3: Absolute Units
Error 4: Missing alt text
Describe Function in Alt Text
Error 5: Incorrect Alt Text
Use Null Alt Text if Decorative
“”
Error 6: Using HTML For Formatting
Error 7: Bad Heading Structure
Correct order: h1>h2>h3>h4
Error 7: Link Text Not Unique
Title Attribute
<a title=“more about finding books” href=“/books.html”> More…</a>
• Use when needed to give more information• Don’t use if repetitive/redundant
Error 8: Link Text Not Descriptive
Error 9: Form Control Problems
• Associate labels with form controls <label for="firstname">First name:</label><input type="text" name="firstname" id="firstname" />
• Form controls need title attribute if no label• Proper reading order if using tab key• Need submit button for search boxes
Error 10: Tables
• Make sense if read linearly• Have captions or summaries
<table summary=“Opening hours for main and branch libraries during fall term”>
<caption>Opening Hours</caption>
• Column & row headings <tr><th scope=“row”>Opening Hours</th><td>9am</td>
Error 11: Embedding<embed src="/sites/all/swf/topic.swf"> <noembed>Please use the links on this page to access alternate versions.</noembed> </embed>
Many Things Not Checked For – Consistency – Skip navigation– Keyboard accessibility– Timing– New windows/popups– Flash or moving content– Accessible document formats– Accessible version of non-accessible content
D. HOW TO CONFORM
WCAG 2.0 Conformance
• Required:– Meet all sufficient techniques/success criteria – Levels A, AA
• Optional (but recommended):– Meet advisory techniques
Getting There
Test site (identify
problems)
Implement changesMonitor
Test Existing Site
User Testingusability & problems variety of technologies
Expert Checking expert = us WCAG 2.0 checklist emulators
Automated Testinghtml/css color contrast accessibility
Automated Testing Tools
• For html/css: – W3C validators
• For WCAG 2.0: – Total Validator (whole site)– TAW 3 (page by page)– Contrast Checker (page by page)
Sample Report: WCAG Errors
Expert Testing Methods
1. Checklist2. Enlarge using browser 3. Navigate using keyboard4. Emulate assistive technology
Fangs Screen Reader Emulator
Fangs Screen Reader Emulator
Web Anywhere
webanywhere.cs.washington.edu/wa.php
User Testing
• Usability test – Common tasks– Different content
• Different assistive technologies
Plan & Implement Changes
• Site template > 80% of errors• Non-template page content:– Identify most common issues– Educate content creators
• Monitor:– Validation– Checking
More Information
WCAG 2.0: www.w3.org/TR/WCAG
Contact me: Joanne OudWilfrid Laurier [email protected]