Lightning guide to accessibility mechanics

Lightning guide to
Accessibility mechanics

TPAC Developer meetup, Lisbon 2016


HTML code


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

DOM tree

DOM information for an HTML checkbox

Accessibility tree

Accessibility tree information for an HTML checkbox

Manipulating the DOM

Accessibility APIs

HTML5.1

SVG2.0

ARIA1.1

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