Lightning guide to accessibility mechanics

Lightning guide to
Accessibility mechanics

TPAC Developer meetup, Lisbon 2016

• Twitter: @LeonieWatson
• Blog:     tink.uk
• Github: https://github.com/ljwatson

HTML code

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

DOM tree

Accessibility tree

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

Accessibility APIs

• UIA, MSAA and IAccessible2 on Windows
• IAccessible2 and ATK on Linux
• Accessibility API on OSX and iOS
• Accessibility Framework on Android

HTML5.1

• Most HTML elements have implicit roles and states
• Documented in the HTML Accessibility API Mappings (AAM)

SVG2.0

• Some SVG elements have implicit roles
• Documented in the SVG Accessibility API Mappings (AAM)

ARIA1.1

• Attributes to use with HTML and SVG
• Changes the accessibility tree
• Does not change the DOM
• Does not add functionality

HTML

<button id="button">
    Tequila <span id="icon"></span>
</button>
<div id="content" hidden>
    <p>Makes me happy!</p>
</div>

HTML + ARIA

<button aria-expanded="false" id="button">
    Tequila <span aria-hidden="true" id="icon"></span>
</button>
<div id="content" hidden>
    <p>Makes me happy!</p>
</div>

Event listeners

button.addEventListener('click', disclose, false);

Functionality

    function disclose(event) {
        if (content.hasAttribute('hidden')) {
            button.setAttribute('aria-expanded', 'true');
            button.setAttribute('aria-controls', 'content');
            content.removeAttribute('hidden');
        }
        else {
            button.setAttribute('aria-expanded', 'false');
            content.setAttribute('hidden', 'true');
            button.removeAttribute('aria-controls');
        }
    }

SVG

<svg version="2.0" width="300" height="200">
    <rect width="75" height="50" rx="20" ry="20" />
    <text x="35" y="30">Tequila!</text>
</svg>

SVG + ARIA

<svg version="2.0" width="300" height="200">
    <rect width="75" height="50" rx="20" ry="20"
         role="button" tabindex="0" aria-expanded="false" />
    <text x="35" y="30">Tequila!</text>
</svg>

Event listeners

    button.addEventListener('click', disclose, false);

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

Demo