Accessibility for Web Developers

Operability Barriers

3. Flashing and Seizures

- Three Times per Second

Operability Barriers

4. Different Ways to Navigate

- Skip Repetitive Content (Bypass vs Landmarks)

- Consistent Tabindexing

- Heading Markup

- Image Navigation without Alt

- Visual Focus Indicator

- Current Location Identifier

- Sitemap, Breadcrumbs, Search

Perceptual Barriers

Operability Techniques

https://atsp.atutorspaces.com/go.php/UWA/content.php/cid/705/

Operability Barriers

Perceptual Barriers

3. Present Content in Different Ways

- Presentation vs Structural Markup

- Explicit Form Labels

- Linear vs Non Linear Table Layout

- Identifying content by shape,

colour,size

2. Enough Time

- Meta-Redirect/Refresh

- Scrolling Content

- Blinking Content

- Session time limits

2. Provide Alternatives for Multimedia

- Captions

- Transcripts

- Described Video/ Audio Descriptions

- Multimedia alternatives to text

Understandability

Barriers

Perceptual Barriers

Operability Barriers

3. Input Assistance

- Accessible Feedback/Error Messaging

- Form Validation

- Submission Reversal

- Context Sensitive Help

Understandability Techniques

Perceptual Barriers

4. Make Foreground/Background

Distinguishable

- Link Colour and…

- Error Colour and…

- Specify both FG and BG Colours

- Background images behind text

- Resize to 200%

- Justified text

https://atsp.atutorspaces.com/go.php/UWA/content.php/cid/713/

Operability Barriers

1. Provide Text Alternatives

- Alt (vs empty Alt)

- Text look-alikes (images of text)

- Non-empty Alt (alt= “placeholder”)

1. Keyboard Access

2. Enough Time

3. Flashing and Seizures

4. Different Ways to Navigate

Perceptual Techniques

1. Keyboard Access

- Event Handlers

- Mouse & Keyboard (hover& focus)

- Tabindex

- Keyboard Traps

https://atsp.atutorspaces.com/go.php/UWA/content.php/cid/696/

Understandability

Barriers

Perceptual Barriers

2. Predictable

- Context Change Onfocus/OnBlur/OnChange

- New Windows Without Warning

- Inconsistent Navigation Elements

- Different Label/Same Function

Perceptual Barriers

Captions

1. Provide Text Alternatives

2. Provide Alternatives for Multimedia

3. Present Content in Different Ways

4. Make Foreground and Background

Distinguishable

Understandability

Barriers

Perceptual Barriers

YouTube Captions

Perceptual Barriers

1. Readable

2. Predictable

3. Input Assistance

Understandability

Barriers

http://goo.gl/I0i439

MultiMedia

1. Readable

- Language Identifiers

- Changes in Language

- Glossary/Definitions

- Abbreviation Expansion

- Lower Secondary Reading Level

1. Captions

2. Description

3. Extended Description

4. Sign

5. Caption Editors

Perceptual Barriers

Described, Captioned

Caption Editors

YouTube Captions

https://www.youtube.com/my_videos

Perceptual Barriers

Arama Captions

http://www.amara.org

To Captcha or not to Captcha

CapScribe (no longer available)

http://www.inclusivemedia.ca/services/capscribe.shtml

http://www.karlgroves.com/2012/04/03/captcha-less-security/

Perceptual Barriers

ReCaptcha

https://www.webscript.io/examples/recaptcha

Extended Description

Accessibility for Web Developers

Perceptual Barriers

AODA Dates

Signed Video

Compatibility Barriers

3. Scripting Custom Element

Compatibility Barriers

Demo ATutor & ChromeVox

WCAG, AODA, IASR

Government

January 1, 2012 (Level A)

January 1, 2016 (Level AA, except 1.2.4, 1.2.5)

January 1, 2020 (Level AA, including 1.2.4, 1.2.5)

Public and Large Organization

January 1, 2014 (Level A) (all new since Jan 2012)

January 1, 2021 (Level AA, except 1.2.4, 1.2.5)

https://atsp.atutorspaces.com/login.php

More ARIA Demo

http://www.oaa-accessibility.org/examples/

Even More ARIA Demos

http://www.accessiblemootoolsdemo.iao.fraunhofer.de/Mootools_Widgets/

[WARNING: This site can take a very long time to load. Worth the wait though.]

1. Markup Validation

2. HTML 5 & WAI-ARIA

3. Scripting Custom Elements

Strategies

and

Techniques

Workshop Summary

WCAG 2 Conformance Levels

Compatibility Barriers

2. HTML 5 & WAI-ARIA

- Work in progress

- Semantic Markup

- header, footer, nav

section, article, figure, aside...

- Video/Canvas Warning

- ARIA roles, live regions

Level A (AODA Requirement 2014)

Must do, or some group will be excluded

Basic accessibility conformance

Level AA (AODA Requirement 2021)

Should do, or some group will have difficulty

Standard accessibility conformance

Level AAA

Can do, to improve usability

Advanced accessibility conformance

http://goo.gl/qDgfSF

1. Overview of WCAG 2.0 (AODA)

2. Perceivable (Barriers/Criteria/Techniques)

3. Operable

4. Understandable

5. Compatible (Robust)

6. Accessibility Review Tools & Strategies

7. Mock Accessibility Review (time permitting)

Understanding Web Accessibility

Compatibility Barriers

1. Markup Validation

https://atsp.atutorspaces.com/go.php/UWA

W3C HTML Validator

http://validator.w3.org/

Accessibility Evaluation

WCAG 2 Accessibility Principles

1. Assemble a Toolkit

Content must be Perceivable

See, Hear, Touch (text is special)

Content must be Operable

Keyboard, Voice, Mouse

Content must be Understandable

Predictable, Readable, Error Avoidance

Content must be Robust

Valid, Standard, Compatible,

Adaptable, Custom UI

2. Review Protocol

3. Mock Accessibility Review

Accessibility Evaluation

1. Assemble a ToolKit

Validators

- http://jigsaw.w3.org/css-validator/

- http://validator.w3.org/

Colour Contrast

- http://juicystudio.com/services/luminositycontrastratio.php

Accessibility Evaluation

Accessibility Testing

- http://www.achecker.ca

- https://earp.ryerson.ca/ComplianceSheriff_Ryerson/Login.aspx

Code Review etc.

- Firebug, IE Developer, FF Developer Toolbar

3. Mock Accessibility Review

Screen Readers

- JAWS, NVDA, Window Eyes, ChromeVox

Readability

Volunteers?

- http://www.online-utility.org/english/readability_test_and_improve.jsp

Accessibility Evaluation

2. Review Protocol

- AChecker Automated Test

- Manual Tests

- Select All

- Tab Key

- Cross Browser Test

- Screen Reader Test

- Colour Contrast Evaluation

- Readability

- User Testing

Accessibility for Web Developers