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
![Page 1: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/1.jpg)
Making Your Web Site Accessible: AODA Compliance
Joanne Oud, Session 415
![Page 2: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/2.jpg)
Overview
A. BackgroundB. Legislation & StandardsC. Common Errors D. How to Conform
![Page 3: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/3.jpg)
A. BACKGROUND
![Page 4: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/4.jpg)
Ontarians with Disabilities
15%
![Page 5: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/5.jpg)
Disabilities Affecting Web Use
![Page 6: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/6.jpg)
Common Assistive Technologies
![Page 7: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/7.jpg)
B. LEGISLATION & STANDARDS
![Page 8: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/8.jpg)
Ontario Standards
• AODA: how-to• Principles:– Dignity – Independence– Removing barriers
![Page 9: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/9.jpg)
New Legislation on Web Sites
• Integrated Standard• Information and Communication section• June 2011
![Page 10: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/10.jpg)
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
![Page 11: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/11.jpg)
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”
![Page 12: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/12.jpg)
WHAT IS WCAG 2.0?
![Page 13: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/13.jpg)
Good News
• Major international standard• Very specific• Lots of guidance• Relatively easy to check
![Page 14: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/14.jpg)
Bad News
• Very specific• Relatively easy to check• Not used in U.S.• Most tools, advice doesn’t apply
![Page 15: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/15.jpg)
WCAG 2.0: Four Major Principles
1. Perceivable2. Operable3. Understandable4. Robust
![Page 16: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/16.jpg)
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
![Page 17: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/17.jpg)
Each Guideline Has Subsections
![Page 18: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/18.jpg)
Each Subsection Has Techniques
![Page 19: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/19.jpg)
Techniques: Example #2
![Page 20: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/20.jpg)
Each Technique Is Described
![Page 21: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/21.jpg)
C. COMMON ERRORS
![Page 22: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/22.jpg)
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
![Page 23: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/23.jpg)
Results: All Libraries
15 errors per page (average)
3
66
![Page 24: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/24.jpg)
Error 1: Invalid Markup
• Markup doesn’t match doctype• Html/xhtml/css errors• Code not valid, well-formed
![Page 25: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/25.jpg)
Error 2: Poor Contrast
![Page 26: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/26.jpg)
<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
![Page 27: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/27.jpg)
Error 4: Missing alt text
![Page 28: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/28.jpg)
Describe Function in Alt Text
![Page 29: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/29.jpg)
Error 5: Incorrect Alt Text
![Page 30: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/30.jpg)
Use Null Alt Text if Decorative
“”
![Page 31: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/31.jpg)
Error 6: Using HTML For Formatting
![Page 32: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/32.jpg)
Error 7: Bad Heading Structure
Correct order: h1>h2>h3>h4
![Page 33: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/33.jpg)
Error 7: Link Text Not Unique
![Page 34: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/34.jpg)
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
![Page 35: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/35.jpg)
Error 8: Link Text Not Descriptive
![Page 36: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/36.jpg)
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
![Page 37: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/37.jpg)
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>
![Page 38: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/38.jpg)
Error 11: Embedding<embed src="/sites/all/swf/topic.swf"> <noembed>Please use the links on this page to access alternate versions.</noembed> </embed>
![Page 39: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/39.jpg)
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
![Page 40: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/40.jpg)
D. HOW TO CONFORM
![Page 41: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/41.jpg)
WCAG 2.0 Conformance
• Required:– Meet all sufficient techniques/success criteria – Levels A, AA
• Optional (but recommended):– Meet advisory techniques
![Page 42: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/42.jpg)
Getting There
Test site (identify
problems)
Implement changesMonitor
![Page 43: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/43.jpg)
Test Existing Site
User Testingusability & problems variety of technologies
Expert Checking expert = us WCAG 2.0 checklist emulators
Automated Testinghtml/css color contrast accessibility
![Page 44: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/44.jpg)
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)
![Page 45: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/45.jpg)
Sample Report: WCAG Errors
![Page 46: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/46.jpg)
Expert Testing Methods
1. Checklist2. Enlarge using browser 3. Navigate using keyboard4. Emulate assistive technology
![Page 47: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/47.jpg)
Fangs Screen Reader Emulator
Fangs Screen Reader Emulator
![Page 48: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/48.jpg)
Web Anywhere
webanywhere.cs.washington.edu/wa.php
![Page 49: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/49.jpg)
User Testing
• Usability test – Common tasks– Different content
• Different assistive technologies
![Page 50: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/50.jpg)
Plan & Implement Changes
• Site template > 80% of errors• Non-template page content:– Identify most common issues– Educate content creators
• Monitor:– Validation– Checking
![Page 51: Making Your Web Site Accessible: AODA Compliance Joanne Oud , Session 415](https://reader036.fdocuments.us/reader036/viewer/2022062521/568166ae550346895ddaa299/html5/thumbnails/51.jpg)
More Information
WCAG 2.0: www.w3.org/TR/WCAG
Contact me: Joanne OudWilfrid Laurier [email protected]