Technologic (Human Afterall): Accessibility mix

Technologic (Human Afterall): Accessibility mix

DEVit, Thessaloniki 2017

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

Images


<img src="chamucos.png"
     alt="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>

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:

DOM order

The tab order follows the DOM order of interactive elements

DOM order example


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

DOM order demo

Expected interactions

Interactive elements have expected interactions provided by the browser:

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

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

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

<

ARIA

Attributes to polyfill semantic information in HTML and SVG

Role

Roles including:

Name (and description)

Attributes for providing accessible names and descriptions:

State

States including:

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

Disclosure keyboard demo

Disclosure button

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:

Optional parameters

Choose optional parameters such as:

"Drag and drop it, zip - unzip it"

Ember a11y test suite

React

Angular

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

Space Jam

Space Jam poster (1996)

Space Jam website

Space Jam website (1996)

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

CSS1

"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:

Browser solutions

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

CSS3 FlexBox

Basic HTML


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

Keyboard demo

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>

Flexed keyboard demo

"Touch it, bring it, pay it, watch it"

Spec advice?

Authors must use ‘order' only for visual, not logical, reordering of content.

tabindex attribute


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

tabindex demo

tabindex problem

aria-flowto attribute


<div style="display: flex;">
    <button id="b1" aria-flowto="b3" style="order: 3;">1</button>
    <button id="b2" aria-flowto="b1" style="order: 2;">2</button>
    <button id="b3" aria-flowto="b2" style="order: 1;">3</button>
</div>

aria-flowto screen reader demo

aria-flowto problem

  • aria-flowto adds another navigation method
  • DOM order, flexed order and aria-flowto order

The Firefox "bug"

"Turn it, leave it, start - format it"

It doesn't have to be perfect

Just a little bit better than yesterday

Technologic (Human afterall): Accessibility mix