You're only supposed to blow the bloody doors off!

Generate, London September 2017

You're only supposed to blow the bloody doors off!

Screen readers

Software that translates on-screen content into synthetic speech

Screen reader demo: text

Screen reader demo: headings

Screen reader demo: forms

Keyboard intercept chain

Windows: Screen reader; Browser
Mac OS: Browser; Screen reader

Virtual/browse mode

Windows screen readers create a virtual copy of the browser contents

Forms/focus mode

Windows screen readers pass keys straight through to the browser

JavaScript keyboard shortcuts

Screenshot of Twitter keyboard shortcuts dialogue

JavaScript keyboard shortcuts: problem

JavaScript keyboard shortcuts: solution

Make JavaScript shortcuts an enhancement (not a primary function)
Make the primary function usable

Platform controls

Role: checkbox
Name: Bold
State: Focusable, Focused, Checked

Accessibility APIs

Windows: UI Automation (UIA); MS Active Accessibility (MSAA); IAccessible2 (IA2)
Mac OS: OSX Accessibility Protocol (AXAPI)
Linux: Accessibility Toolkit (ATK); AT Service Provider Interface (AT-SPI)

Web controls

<label for="this">Bold</label>
< type="checkbox" id="this" checked>

Role: checkbox
Name: Bold
State: Focusable, Focused, Checked

Accessibility mappings

Define how role, state, properties, and keyboard focus for native elements are handled in the browser

Core Accessibility API Mappings (AAM) 1.1
w3.org/TR/core-aam-1.1
HTML AMM 1.0
w3.org/TR/html-aam-1.0
SVG AAM 1.0
w3.org/TR/svg-aam-1.0

HTML mapping support

Browsers may support an element, but not accessibility support it

A browser may accessibility support an element, but a screen reader may not

html5accessibility.com

Manipulating the DOM

Browser parses the HTML and builds the DOM
Browser uses the DOM to build the accessibility tree
Browser updates the DOM in response to user interaction or scripted events
Browser responds to changes in the DOM and updates the accessibility tree
Assistive technologies listen for changes in the accessibility tree and respond accordingly

Polyfill accessibility

When native accessibility information is unavailable

ARIA 1.0
w3.org/TR/wai-aria
ARIA 1.1 (Candidate Recommendation)
w3.org/TR/wai-aria-1.1

ARIA: don't use it

Use native HTML whenever possible

Keyboard interaction
Focus management
Role, state, and property information

Native HTML

<button>Tequila!</button>

var button = document.getElementById('button');
button.addEventListener('click', doSomething, false);

Screen reader demo: native HTML

ARIA: unless you need to

When repurposing elements like <div> and <span>

Missing semantics

<span id="button">Tequila!</span>

Keyboard demo: missing semantics

Screen reader demo: missing semantics

With added semantics

<span id="button" role="button" tabindex="0">Tequila!</span>

Screen reader demo: with added semantics

ARIA: don't break native semantics

<button role="heading" aria-level="1">Tequila!</button>

Screen reader demo: broken semantics

ARIA: make it work with a keyboard

When you create custom components it's your responsibility to make it work with the keyboard

Supplement existing interaction

<a href="#here" id="button" role="button">Tequila!</a>

var button = document.getElementById('button');
button.addEventListener('keydown', function(event) {
    if (event.keyCode == 13) {
        doSomething();
    }
});

Provide all interaction

<span id="button" role="button" tabindex="0">Tequila!</span>

var button = document.getElementById('button');
button.addEventListener('keydown', function(event) {
    if (event.keyCode == 13 || event.keyCode == 32) {
        toggle();
    }
});

Screen reader demo: provide all interaction

Using the application role

<body role="application">...</body>

Removes the screen reader from the keyboard intercept chain

Roles that trigger applications mode

Many ARIA roles trigger applications mode automatically, including:

tablist
grid
menu and menubar
toolbar

Screen reader demo: application mode with tablist

Keyboard focus: roving tabindex

Set the currently selected object to tabindex="0"
Set all other objects to tabindex="-1"
When user navigates to next object set focus using .focus()
Set currently selected object to tabindex="0", and all others to tabindex="-1"

Keyboard interaction: event listeners

Listen for keydown and capture keycodes:

Left 37
Right 38
Up 39
Down 40

Screen reader demo: application mode with tablist and keyboard interaction

Accessibility Object Model (AOM)

Experimental JavaScript API that enables developers to modify the accessibility tree

AOM phases

Modify the semantic properties of the accessibility node associated with a DOM node;
Directly respond to events or actions from AT;
Create virtual accessibility nodes (not associated with DOM nodes);
Programmatically explore the accessibility tree, and access the computed properties of accessibility nodes.

AOM Phase 1

Has landed in Chrome Canary behind the flag:

--enable-blink-features=AccessibilityObjectModel

HTML code

<span id="button">Tequila!</span>
<div id="container">
Makes me happy!
</div>

Create DOM node references

var button = document.getElementById('button');
var container = document.getElementById('container');

Modify DOM node properties

button.setAttribute('tabindex', 0);
container.setAttribute('hidden', true);

Modify accessible node properties

button.accessibleNode.role = "button";
button.accessibleNode.expanded = false;

Create AccessibleNodeList

var content = new AccessibleNodeList();
content.add(container.accessibleNode);

Create the function

    function disclose(event) {
        if(container.getAttribute('hidden')) {
            button.accessibleNode.expanded = true;
            button.accessibleNode.controls = content;
            container.removeAttribute('hidden');
        }
        else {
            button.accessibleNode.expanded = false;
            button.accessibleNode.controls = null;
            container.setAttribute('hidden', true);
        }
    }

Add event listeners

    button.addEventListener('click', disclose, false);
    button.addEventListener('keydown', function(event) {
        if (event.keyCode == 13 || event.keyCode ==32) {
            disclose();
        }
    });

Screen reader demo: AOM disclosure