aoda: enabling innovation adam doan - @doanac randy oldham - @roldham wednesday sept 9th @ 11:15am
TRANSCRIPT
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!
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!