Time traveller's guide to accessibility mechanics

Dev Days, Vilnius May 2019

Léonie Watson, TetraLogical

• @LeonieWatson
• https://tink.uk
• @LJWatson

Browsers

Chrome	Edge	Firefox	Safari
(Google)	(Microsoft)	(Mozilla)	(Apple)

Screen readers

Jaws	NVDA	Voiceover	Narrator	Orca
(Freedom Scientific)	(NV Access)	(Apple)	(Microsoft)	(GNOME)

Past...

In the 1990s

Screen readers consumed the HTML directly from the browser, and created a virtual model of the content

Demo: reading text

By the 2000s

Screen readers began using platform accessibility APIs to query information from the browser

Platform accessibility APIs

UI Automation (UIA) MS Active Accessibility (MSAA) IAccessible2 (IA2)	OSX Accessibility Protocol (AXAPI)	Accessibility Toolkit (ATK) AT Service Provider Interface (AT-SPI)

The main element

<main>...</main>

Role

main

The nav element

<nav>...</nav>

Role

navigation

The ol element

<ol>
<li>Do this</li>
<li>Do that</li>
<li>Do something else</li>
</ol>

The h1 element

<h1>...</h1>

Role

heading

State

Level 1

The checked attribute

<input type="checkbox" checked>

Role

checkbox

State

checked

Demo: the checked attribute

The button element

<button>Play</button>

Role

button

Name

Play

State

Focusable

Interaction

Click, Keyboard, Tap

Demo: the button element

Present...

Custom UI components

• We create things that do not exist in HTML
• We use div and span elements as building blocks

Neutral elements

<div class="toolbar">
<span class="button">Bold</span><span class="button">Italic</span>...
</div>

Role

-

Name

-

State

-

Using ARIA

Attributes that polyfill missing role, name, and state information for screen readers

• ARIA 1.1 (W3C Recommendation):
  w3.org/tr/wai-aria-1.1/
• Rules for Using ARIA (W3C Note):
  w3.org/TR/using-aria/

The role attribute

70+ roles, including:

• tablist, tab, tabpanel
• checkbox, radio, textbox
• table, row, cell
• toolbar, menu, menubar

The aria- attributes

45+ states and properties, including:

• aria-invalid, aria-required
• aria-pressed, aria-expanded
• aria-controls, aria-owns

The span element

<span id="button">Play</span>

Role

Name

State

The role attribute

<span id="button" role="button">Play</span>

Role

button

Name

Play

State

The tabindex attribute

<span id="button" role="button" tabindex="0">Play</span>

Role

button

Name

Play

State

Focusable

Keyboard interaction

<span id="button" role="button" tabindex="0">Play</span>

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

Demo: Custom button

The aria-pressed attribute

<span id="button" role="button" tabindex="0" aria-pressed="false">Play</span>

Role

button

Name

Play

State

Focusable, Not pressed

The functionality

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

function doSomething(event) {        
    if (button.getAttribute('aria-pressed') == 'false') {
        button.setAttribute('aria-pressed', 'true');
    }
    else {
        button.setAttribute('aria-pressed', 'false');
    }
}

The CSS attribute selector

span[aria-pressed="true"] {
    color: #fff;
    padding: 11px 12px 9px 16px;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
}

Demo: the aria-pressed attribute

The button element

<button id="button" aria-pressed="false">Play</button>

Role

button

Name

Play

State

Focusable, Not pressed

The custom element

class tButton extends HTMLElement {
    constructor () {
        super();
        var shadow = this.attachShadow({ mode: 'open' });

        // Additional code

        shadow.appendChild(button);
    }
}
customElements.define('toggle-button', tButton);

Extending the button element

constructor () {
    ...
    var button = document.createElement('button');
    var text = this.innerHTML;

    button.classList.add('toggle-button');
    button.textContent = text;
    ...
}

The functionality

constructor () {
    ...
    function toggle(event) {
        if (button.getAttribute('aria-pressed') == 'false') {
            button.setAttribute('aria-pressed', 'true');
        }
        else {
            button.setAttribute('aria-pressed', 'false');
        }
    }
    button.addEventListener('click', toggle, false);
    ...
}

The toggle-button element

<toggle-button>Play</toggle-button>

Role

toggle-button

Name

Play

State

Focusable, not pressed

Demo: the toggle-button element

The rendered code

<toggle-button aria-pressed="false">Play</toggle-button>

Future

Accessibility Object Model (AOM)

An experimental JavaScript accessibility API:
github.com/WICG/aom

Phase 1A: ARIA reflection

Instead of:

button.setAttribute('role', 'button');
button.setAttribute('aria-pressed', 'false');

It would be:

button.role = 'button';
button.ariaPressed = 'false';

Phase 1B: Custom Element semantics

Authors will be able to:

• Set immutable default semantics by setting properties through the ElementDefinitionOptions object
• Modify semantics in response to user interaction using the ElementInternals object

Phase 2: User action events

Authors will be able to respond to new types of input event, including:

• actionIncrement and actionDecrement
• actionDismiss
• actionScrollpageUp and actionScrollPageDown

Phase 3: Virtual accessibility nodes

Will allow authors to create virtual accessibility tree nodes that do not map to the DOM

Phase 4: Computed accessibility tree

Will allow authors to:

• Access all computed properties for nodes in the accessibility tree
• Walk the computed accessibility tree (including virtual nodes)

Be a time traveller

Use the best...

Of the past, present, and future

Thank you!

Léonie Watson, TetraLogical

• @LeonieWatson
• https://tink.uk
• @LJWatson