AODA: Enabling Innovation

Adam Doan - @DoanAC

Randy Oldham - @roldham

Wednesday Sept 9th @ 11:15am

Who We Are

Adam Doan Systems Developer – Research Enterprise

and Scholarly Communications The Atrium, Open Journal Systems (OJS),

Food Map, Drupal, Omeka Randy Oldham

Web Development Librarian & Manager Websites & Product UI Knows HTML, CSS, and just enough JS to

be dangerous

Notes…

Verbose slides

Provided to improve Accessibility

Helps these to be useful after the fact

Please pop us an email and we’ll share the slides

Background: AODA

What is AODA? Accessibility for Ontarians with Disabilities

Act Provincial legislation (June 2005) Mandatory accessibility standards to

improve life for people with disabilities One of the Integrated Accessibility

Standards is dedicated to web accessibility: Information and Communication Standards

Enforces WCAG 2.0 A and AA compliance by set dates

Background: WCAG

WHAT IS WCAG? Web Content Accessibility Guidelines versi

on 2 Developed by the

W3C: World Wide Web Consortia They create the standards which guide

and govern the entire internets… all of the internets: HTML, XML…

The take home: The Provincial Government pointed to worldwide standards to ensure accessible websites

The AODA Legislation

“By January 1, 2016, all internet websites and web content must conform with WCAG 2.0 Level AA…”

“(5) Except where meeting the requirement is not practicable, this section applies,”

AODA Continued…

(a) 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; and

(b) to web content published on a website after January 1, 2012. O. Reg. 191/11, s. 14 (5).

AODA Continued…

(6) In determining whether meeting the requirements of this section is not practicable, organizations referenced in subsections (1) and (2) may consider, among other things,

(a) the availability of commercial software or tools or both; and

(b) significant impact on an implementation timeline that is planned or initiated before January 1, 2012. O. Reg. 191/11, s. 14 (6).

AODA Take Home:

The legislation is vague There are sweeping ‘outs’

When “Not Practicable” 3rd Party Systems… Archival & Special Collection Resources

Contributes to non-compliance or avoidance, especially for more complex content

How can we move forward and ensure compliance?

What We’ll Talk About

Accessibility often seen as limiter to innovation

“Web 2.0” features can challenge accessibility compliance

Avoid & Simplify

AODA compliant & innovative?

What We’ll Do…

Show a few common yet challenging bits of content

Explain why they’re a challenge to the AODA

Demo AODA-compliant workarounds

Escalate in complexity

Complex Content

Types of Complex Content

Audio/Video Captioning Audio/Video Embedding Calendar View of content vs list view Crowd-sourced Transcription via

OMEKA or a webform Timelines in Drupal Language Toggle in Open Journal

Systems

CAPTIONS & TRANSCRIPTION

Web-based Audio & Video

AODA - Web-Based A/V

Web-based Audio and Video

WCAG 2.0 – 1.2.2 Captions are provided for all pre-recorded

audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

AODA - Web-Based A/V

Web-based Audio and Video

WCAG 2.0 – 1.2.3 An alternative for time-based media or

audio description of the pre-recorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

AODA - Web-based A/V

DECIPHERED: Web-based video with audio must have

captions and a transcript Visual impairment & Audio impairment…

AND learning disabilities!

Types of content… Training videos Promo videos Lecture capture Video tutorials

YouTube Captions – HOW TO

Upload Video to YouTube Go to VIDEO MANAGER Select SUBTITLES AND

CC Set the Language Click ADD NEW

SUBTITLES OR CC Click on the AUTO-

GENERATED version EDIT

YouTube Captions – How To

YouTube Captions

YouTube Transcript

The generated transcript is NOT available to screen readers

Copy the transcript created by your captions and paste as the video DESCRIPTION

YouTube Transcript

Video Manager – Edit – Info & Settings

Paste in Description The description text

IS available to screen readers (even what is hidden behind the SHOW MORE link)

Also Searchable!

KEYBOARD NAVIGABLEWeb-based Audio & Video

EMBED CODE

You’ve got an AODA-compliant video You want to include it on your

website…you head for embed…

AODA – Keyboard Nav

Website must be keyboard navigable

WCAG 2.0 – 2.1.1 All functionality of the content is operable

through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. (Level A)

AODA – Keyboard Nav

Website must be keyboard navigable

WCAG 2.0 – 2.1.2 If keyboard focus can be moved to a

component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away. (Level A)

AODA – Keyboard Nav

DECIPHERED: Webpages must be navigable by your

keyboard If you nav to something with keyboard, you

must be able to nav out using keyboard

Types of content… Web forms Menu items EMBEDDED content CAN pose issues

YouTube, Twitter widgets…

AODA – KEYBOARD NAV

EMBEDDED YouTube CAN become keyboard trap

Take a screen capture of the YouTube video in the player and make this a link to the video page in YouTube

AODA – KEYBOARD NAV

Don’t forget an alt tag on your image!

This is a simple way to include a link to a YouTube video that LOOKS embedded, but is GUARANTEED AODA compliant

*RECENT YOUTUBE CHANGES

ACCESSIBLE ALTERNATIVES

Tables

Tables - AODA

Tables need a bit of extra care & feeding to make them compliant with AODA…

WCAG 2.0 – 1.3.1 Information, structure, and relationships

conveyed through presentation can be programmatically determined or are available in text. (Level A)

Tables - AODA

Tables don’t just present information, they present Information & INFORMATION RELATIONSHIPS in a VISUAL way…

The info… Randy Blond Green, doesn’t make a whole lot of sense without headers…

NAME Hair Colour Eye Colour

Randy Oldham Blond Green

Adam Doan Brown Hazel

Tables - AODA

You CAN make tables accessible but…

Requires HTML knowledge The more complex the table, the more

inaccessible it becomes Table summary NOT ENOUGH (and often,

it is impossible) Accessible tables are still a nightmare for

screen readers… THINK ABOUT ALTERNATE FORMATS!

Calendars

Calendars! Big ol’ tables We use them for:

Events Workshops Hours…

These can be a pain for screen readers The case for CONTENT

MANAGEMENT SYSTEMS and CONTENT VIEWS

Calendars

With a CMS you can create new VIEWS of content

One view of the events/workshops ON the calendar

One view of upcoming events in a LIST VIEW

Same content… just different views! DEMO

The Calendar…

Calendar – LIST VIEW

Alternative format

Upcoming events, from today on

Reader-friendly

LD-friendly

Enabling Transcription

Transcription - AODA

WCAG 2.0 – 1.1.1

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

We’re from the Library Digitization projects for Digital Humanities

Part of the process is working with these resources

Hundreds of thousands of pages of farm diaries…hand written…scanned…images

IMAGES OF TEXT…cannot OCR… Archival resource exemption!?

Transcription - AODA

OMEKA

Transcription – Work Around

Don’t have OMEKA? NO PROBLEM! Link on each page of this type of

content to a webform which captures the referring URL, and provides box for crowd-sourced transcription

Workflow on the backend, but easier to meet accessibility requests!

ENABLING greater compliance!

Summary

Be Creative Read the documentation Working with Open Source

Leverage your resources WCAG 2.0 WCAG 2.0 Quickref ARIA

Be friendly and specific Share!

QUESTIONS?

QUESTIONS?

Adam Doan doana@uoguelph.ca @DoanAC

Randy Oldham roldham@uoguelph.ca @roldham

OJS Language Tools

OJS Language Toggle

Select element which triggers a page refresh using an onchange event

WCAG 2.0 – 3.2.2 3.2.2 Changing the setting of any user

interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component. (Level A)

OJS Language Toggle

Compliance Submit button Warn in advance

Challenges Compromises

Background: WAI-ARIA

Accessible Rich Internet Applications Targeted for dynamic content and

advanced user interface controls Provides meaning through:

Roles States Properties

Compliance

<form action=“” onsubmit=“changeLanguage()”>

<label for=“languageSelect”>Select Language</label>

<span id=“language-select-description” class=“hidden”>

Warning: Changing this value will trigger a page refresh and

change the language of the site.

</span>

<select id=“languageSelect” aria-describedby=”language-select-description" >…</select>

</form>

Timelines in Drupal

Timelines in Drupal

Drupal Views TimelineJS module.

WCAG 2.0 – 1.1.1 All non-text content that is presented to the user has a text

alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

Timelines in Drupal

Compliance Provide text based alternative Short text Longdesc

Challenges Partial interpretability

Skip links + aria-hidden <figure> / <figcaption> / <details> aria-label, aria-describedby, aria-describedat

Timelines in Drupal

<figure id=“timeline” aria-describedby=“timeline-tabular”>

<figcaption class=“hidden”><p>A timeline of diarists with the associated temporal coverage provided by their diaries</p>

</figcaption>

<div class=“block block-timeline>…Drupal TimelineJS…</div>

<table id=“timeline-tabular”>…Drupal views…</table>

</figure>

Timelines in Drupal

Drupal Maps

The same technique can be used for maps!