Developer's guide to accessibility mechanics

Developer's guide to
accessibility mechanics

You Gotta Love Frontend, Tel Aviv June 2016

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

Platform Accessibility APIs

• Windows: UIAutomation, MSAA, IAccessible2
• Mac OS: NSAccessibility Protocol
• Linux: IAccessible2 ATK/AT-ASPI
• iOS: UIAccessibility
• Android: Accessibility Framework

Platform controls

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

Web controls

<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)

Neutral semantics

<div> and <span> are containers, and have weak accessibility information.

<span>Plain text</span>

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

With HTML...

You get:

• Focus
• Interaction
• Semantics

Link design pattern

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

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/

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

Or just use HTML

http://ljwatson.github.io/design-patterns/toggletip1/

Tabpanels design pattern

http://ljwatson.github.io/design-patterns/tabpanels2/

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

Accessible design patterns

• LJWatson.github.io/design-patterns/
• https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/

Thank you!

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