Developer's guide to accessibility mechanics

Developer's guide to
accessibility mechanics

London Web Standards, May 2016

@LeonieWatson

Platform controls

Bold checkbox in Windows 10

Web control


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

HTML Accessibility API Mappings (AAM)

The relationship between platform objects and web objects is documented in the HTML AAM

Content navigation (headings)

Content navigation (landmarks)

DOM tree

DOM tree

Accessibility tree

Accessibility tree

Neutral semantics

<div> and <span> have semantically neutral default implicit roles


<span>Plain text</span>

Link design pattern

Ljwatson.github.io/design-patterns/link1/link.html

HTML


<span id="link" data-link="http://tink.uk">
    Tink UK
</span>

Link demo

Link keyboard demo

Link screenshot

Add tabindex


<span id="link" data-link="http://tink.uk" tabindex="0" >
    Tink UK
</span>

Add focus styles


span:hover, span:focus, span:active {
    color: #000;
    background-color: #fc0;
	cursor: pointer;
}

Add link role


<span id="link" data-link="http://tink.uk"
      tabindex="0" role="link">
    Tink UK
</span>

Add event listeners


link.addEventListener("click", fetchResource);
link.addEventListener("keydown", fetchResource);

Add functionality


var fetchResource =  function (e) {
    e.preventDefault();
    window.location.href = e.target.dataset.link;
};

Add keyboard functionality


var fetchResource =  function (e) {
    if (e.type === "keydown" && e.keyCode !== 13) {
        return false;
    }

    e.preventDefault();
    window.location.href = e.target.dataset.link;
};

Link screen reader demo

Or just use HTML


<a href="http://tink.uk">Tink UK</a>

ToggleTip design pattern

Ljwatson.github.io/design-patterns/toggletip2/toggletip.html

HTML


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

<div id="tip">
    <span id="content"></span>
</div>

ToggleTip demo

ToggleTip keyboard demo

ToggleTip screenshot

Add tabindex


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

<div id="tip">
    <span id="content"></span>
</div>

Add focus styles


span[id="button"]:hover, span[id="button"]:focus {
    background-color: #fc0;
	color: #555;
}

Add role attributes


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

<div id="tip" role="complementary">
    <span id="content" role="tooltip"></span>
</div>

Add aria-expanded attribute


<span id="button" tabindex="0" role="button"
	aria-expanded="false">Tequila</span>

<div id="tip" role="complementary">
    <span id="content" role="tooltip"></span>
</div>

Add aria-describedby attribute


<span id="button" tabindex="0" role="button"
	aria-expanded="false" aria-describedby="tip">Tequila</span>

<div id="tip" role="complementary">
    <span id="content" role="tooltip"></span>
</div>

Add hidden attribute


<span id="button" tabindex="0" role="button"
	aria-expanded="false" aria-describedby="tip">Tequila</span>

<div id="tip" role="complementary" hidden>
    <span id="content" role="tooltip"></span>
</div>

Add aria-live attribute


<span id="button" tabindex="0" role="button"
	aria-expanded="false" aria-describedby="tip">Tequila</span>

<div id="tip" role="complementary" hidden>
    <span id="content" role="tooltip" aria-live="polite"></span>
</div>

Add event listeners and functionality


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

button.addEventListener('keydown', function(e) {
    if (e.keyCode == 13 || e.keycode == 32) {
        toggleTip();
    }
});

Add more functionality


document.addEventListener('keydown', function(e) {
    if (e.keyCode == 27) {
        toggleTip();
    }
});

If ToggleTip is hidden...


button.setAttribute('aria-expanded', 'true');
content.innerHTML = "Makes me happy!";
tip.removeAttribute('hidden');

If ToggleTip is not hidden...


button.setAttribute('aria-expanded', 'false');
content.innerHTML = '';
tip.setAttribute('hidden', true);

ToggleTip screen reader demo

Tabpanels design pattern

Ljwatson.github.io/design-patterns/tabpanels1/tabpanel.html

HTML


<ul>
    <li>
        <a href="#panel1" id="tab1">Blanco</a>
    </li>
    <li>
       <a href="#panel2" id="tab2">Reposado</a>
    </li>
</ul>

More HTML


<div id="panel1">Blanco tequila…</div>

<div id="panel2">Reposado tequila…</div>

Screen reader tabpanels demo

Add role attributes


<ul role="tablist">
    <li role="presentation">
        <a href="#panel1" id="tab1 role="tab"><Blanco</a>
    </li>
    <li role="presentation">
       <a href="#panel2" id="tab2" role="tab"><Reposado</a>
    </li>
</ul>>

Add another role attribute


<div id="panel1" role="tabpanel">Blanco tequila…</div>
<div id="panel2" role="tabpanel">Reposado tequila…</div>

Add aria-controls attribute


<ul role="tablist">
    <li role="presentation">
        <a href="#panel1" id="tab1 role="tab" aria-controls="panel1">
          Blanco</a>
    </li>
</ul>

<div id="panel1" role="tabpanel">Blanco tequila…</div>

Add aria-selected attribute


<ul role="tablist">
    <li role="presentation">
        <a href="#panel1" id="tab1" role=tab" aria-controls="panel1"
	       aria-selected="true">Blanco</a>
    </li>
    <li role="presentation">
        <a href="#panel2" id="tab2" role="tab" aria-controls="panel2"
	       aria-selected="false">Reposado</a>
    </li>
</ul>

Add tabindex attribute


<ul role="tablist">
    <li role="presentation">
        <a href="#panel1" id="tab1" role=tab" aria-controls="panel1"
	       aria-selected="true" tabindex="0">Blanco</a>
    </li>
    <li role="presentation">
        <a href="#panel2" id="tab2" role="tab" aria-controls="panel2"
	       aria-selected="false" tabindex="-1">Reposado</a>
    </li>
</ul>

Add hidden attribute


<ul role="tablist">
...
    <li role="presentation">
        <a href="#panel2" id="tab2" role="tab" aria-controls="panel2"
	 aria-selected="false" tabindex="-1">Reposado</a>
    </li>
</ul>

<div id="panel1" role="tabpanel">Blanco tequila…</div>
<div id="panel2" role="tabpanel" hidden>Reposado tequila…</div>

Add aria-labelledby attribute


<ul role="tablist">
    <li role="presentation">
        <a href="#panel1" id="tab1" role=tab" aria-controls="panel1"
	 aria-selected="true" tabindex="0">Blanco</a>
    </li>
	...
</ul>

<div id="panel1" role="tabpanel" aria-labelledby="tab1">
    Blanco tequila…
</div>

Add keyboard interaction

Listen for keydown and capture keycodes:

Screen reader tabs demo

Quick & dirty accessibility mechanics

Thank you!