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 Universityjoud@wlu.ca