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

W3C Developer meetup, San Francisco November 2017

Léonie Watson ~ The Paciello Group (TPG)

5... 4... 3... 2... 1...

Screen readers

Software that translates on-screen content into synthetic speech

Screen reader demo: text

Screen reader demo: headings

Web controls

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

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)

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 AAM 1.0
w3.org/TR/html-aam-1.0
SVG AAM 1.0
w3.org/TR/svg-aam-1.0

Polyfill missing semantics

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

Don't use ARIA

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);

Polyfilled HTML

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

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

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

Screen reader demo: button

Don't break native semantics

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

Screen reader demo: broken semantics

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) {
        doSomething();
    }
});

Screen reader demo: provide all interaction

Don't trigger applications mode

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

Stops screen reader commands from working and hands navigation over to the webapp

Roles that trigger applications mode

Many ARIA roles trigger applications mode automatically, including:

application
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:

37 (Left)
38 (Right)
39 (Up)
40 (Down)

Screen reader demo: application mode with tablist and keyboard interaction

Manipulate the accessibility tree carefully

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