Technologic (Human Afterall): Accessibility mix

ffconf, Brighton 2016

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

"Buy it, use it, break it, fix it"

"Trash it, change it, mail - upgrade it"

Implicit semantics

Most HTML elements have implicit semantics (role and state)

Links


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

Role = "link"
Accessible name = "Tink.UK"
State = focusable

Images


<img src="chamucos.png"
     alt="A bottle of Chamucos tequila with the dancing devil logo">

Role = "image"
Accessible name = "A bottle of Chamucos tequila with the dancing devil logo"

Inputs


<input type="checkbox" id="tequila" checked>
<label for="tequila">Tequila makes me happy</label>

Role = "checkbox"
Accessible name = "Tequila makes me happy"
State = "focusable checked"

Neutral semantics

Some HTML elements do not convey semantics (role or state)

Divs and spans


<div>This is just</div>
<span>like plain text</span>

"Charge it, point it, zoom it, press it"

Keyboard focus

HTML has interactive elements that receive focus, including:

<a href>
<button>
<input>

DOM order

The tab order follows the DOM order of interactive elements

DOM order example


<button>1</button>
<button>2</button>
<button>3</button>

Expected interactions

Interactive elements have expected interactions provided by the browser:

A link is activated by click, tap or the Enter key
A button is activated by click, tap or the Enter or Space key
An input is activated by click, tap or the Enter key

"Snap it, work it, quick - erase it"

HTML code


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

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

"Write it, cut it, paste it, save it"

ARIA

Attributes to polyfill semantic information in HTML and SVG

Role

Roles including:

dialog
slider
toolbar
tree
tablist

Name (and description)

Attributes for providing accessible names and descriptions:

aria-label
aria-labelledby
aria-describedby

State

States including:

aria-checked
aria-pressed
aria-hidden
aria-invalid
aria-current

"Load it, check it, quick - rewrite it"

Disclosure design pattern

ljwatson.github.io/design-patterns/disclosure3/

HTML code


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

Add focus


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

<script>
  var button = document.getElementById('button');
  button.setAttribute('tabindex', 0);
</script>

Add button role


button.setAttribute('role', 'button');

Add aria-expanded attribute


button.setAttribute('aria-expanded', 'false');

Add aria-controls attribute


button.setAttribute('aria-controls', 'content');

Add aria-hidden attribute


icon.setAttribute('aria-hidden', 'true');

Add hidden attribute


content.setAttribute('hidden', 'true');

Rendered code


<span id="button" tabindex="0" role="button"
      aria-expanded="false" aria-controls="content">
    Tequila <span id="icon" aria-hidden="true"></span>
</span>
<div id="content" hidden>Makes me happy</div>

Mouse events


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

Keyboard events


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

Add functionality


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');
}

Disclosure screen reader demo

Or just use HTML

ljwatson.github.io/design-patterns/disclosure1/

"Plug it, play it, burn it, rip it"

Tenon API

Use the Tenon API with your build tools

Installation

Install a Tenon module for Grunt, Gulp or other environments

Required parameters

Send a post request to the API with required parameters:

key - Your API key
url - The application to be tested

Optional parameters

Choose optional parameters such as:

certainty - Sets the level of certainty for issue reporting
priority - Requests a priority level for each issue
level - Sets the WCAG level to test against
viewPortHeight - Sets the viewport to be tested

"Drag and drop it, zip - unzip it"

Ember a11y test suite

Ember a11y test suite

React

"Lock it, fill it, call it, find it"

Test it yourself

Abandon your mouse, turn on a screen reader, zoom in/out

"View it, code it, jam - unlock it"

Old school style...


<body vlink="#ff4c4c"
      alink="#ff4c4c"
      link="#ff4c4c"
      text="#ff0000"
      bgcolor="#000000"
      background="img/bg_stars.gif">
...
</body>

Formatting...


<center>
<nobr>
...
</nobr>
</center>

Layout...


<table width="500" border="0">
  <tbody>
    <tr>
      <td align="left">...</td>
      ...
    </tr>
  <tbody>
</table>

Fonts...


<font size="-1">
  <a target="_blank" href="http://www.warnerbros.com/term-use">
    Legal/Privacy Information About This Site.</a>
</font>

"Surf it, scroll it, pause it, click it"

Accessibility

No style override
No text resize
No layout flexibility

CSS1

CSS1 (W3C Recommendation 1996)
Box model and basic floats
Properties for fonts, colours and dimensions
Pseudo-class for anchors

"Cross it, crack it, switch - update it"

CSS2

:after example


#a:after {
  content: ' Makes me happy!';
}
...
<a href="/" id="a">Tequila!</a>

Rendered code


<a href="/" id="a">Tequila!</a>

"Name it, rate it, tune it, print it"

CSS2.1 on generated content

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

:after screen reader demo

Browser support

CSS generated content is accessibility supported in:

Chrome
Edge
Firefox
Safari

Browser solutions

Create a text node in the accessibility tree
Include generated content in the accessible name computation

"Scan it, send it, fax - rename it"

CSS3 FlexBox

CSS3 FlexBox (W3C Candidate Recommendation 2016)
Easier responsive layouts
No more float hacks

Basic HTML


<div>
    <button>1</button>
    <button>2</button>
    <button>3</button>
</div>

display and order properties


<div style="display: flex;">
    <button style="order: 3;">1</button>
    <button style="order: 2;">2</button>
    <button style="order: 1;">3</button>
</div>