Developer's guide to accessibility mechanics

Developer's guide to
accessibility mechanics

From The Front, Bologna 2016

@LeonieWatson

Platform controls

• Role is "checkbox"
• Accessible name is "Bold"
• State is focused, checked, focusable

Web control

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

• Role is "checkbox"
• Accessible name is "Bold"
• State is focused, checked, focusable

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

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

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

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:

• Left 37
• Right 38
• Up 39
• Down 40

Screen reader tabs demo

Quick & dirty accessibility mechanics

• Use the right HTML (let the browser do the work)
• Provide focus and keyboard support
• Provide accessible names and descriptions
• Communicate state

Thank you!

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