ARIA Serious?
Eric Eggert · #ID24 2017 ·
Eric Eggert
Web Accessibility Specialist @
Knowbility (Assessments, Teaching)
50% W3C Fellow → WAI/EOWG
DISCLAIMER:
This presentation contains ARIA examples that are preventing websites and applications from being accessible.
Don’t copy & paste.
WAI-ARIA:
Accessible Rich
Internet Applications
Internet Applications
To ARIA or not to ARIA?
5 Rules of ARIA (according to Notes on Using ARIA in HTML)
First Rule of ARIA use
If you can use a native HTML5 element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
Second Rule of ARIA use
Do not change native semantics, unless you really have to .
Example
<h1 role="button">heading button</h1>
<h1><button>heading button</button></h1>
(Bad!)
(Good!)
Third Rule of ARIA use
All interactive ARIA controls must be usable with the keyboard.
Example
If using role=button the element must be able to receive focus and a user must be able to activate the action associated with the element using both the enter (on WIN OS) or return (MAC OS) and the space key.
Fourth Rule of ARIA use
Do not use role="presentation" or aria-hidden="true" on a visible focusable element.
Fifth Rule of ARIA use
All interactive elements must have an accessible name.
ARIA support
aria-controls example
<button
aria-expanded="false"
aria-controls="expandable">
open / close
</button>
<div id="expandable" hidden>
content of the expandable region
</div>aria-controls example
<button
aria-expanded="false"
aria-controls="expandable">
open / close
</button>
<div>
<!-- a load of other markup,
including interactive
elements in focus order -->
</div>
<div id="expandable" hidden>
content of the expandable region
</div>Support
- ✅ JAWS
- ╳ Every other Screen Reader
- ╳ Every other assistive technology
JAWS
When you focus an element with the attribute included, JAWS will announce, “press the JAWS key plus Alt and M to move to the controlled element.” Verbose and clumsy.
Then again, I’m not sure how else you’d go about supporting it.
But, that’s not the only problem. How in the hell do I move back? And, even if I could, how would that be communicated and how long should the option to move back remain active? No wonder the other screen reader vendors are giving this a wide berth.
But there is more!
But there is more!
<button
aria-controls="elem1 elem2 elem3 elem4"
>
open / close
</button>What to do?
- Same-page links to move users from one part of the interface to another
- Landmark roles to encapsulate major areas of the interface’s functionality
- Expandable areas that come immediately after their aria-expanded controllers in the source (and in focus order)
WAI ARIA is really Complicated!
Also complicated for web developers!
Exhibit 1 – Bad!
<a id="airline-logo" href="…"
class="logo"
aria-label="Airline Name">
</a>Exhibit 1 – Good!
<a id="logo" href="…">
<img src="…" alt="Airline Name">
</a>
<a id="logo" href="…">
<svg>
<title>Airline Name</title>
…
</svg>
</a>Exhibit 2 – Bad!
<div class="nav">
<a href="javascript:void(0);"
class="navInactive"
role="button">
<span class="hiddenText">Slide 1</span>
</a>
<a href="javascript:void(0);"
class="navActive"
role="button">
<span class="hiddenText">Slide 2</span>
</a>
<a href="javascript:void(0);"
class="navInactive"
role="button">
<span class="hiddenText">Slide 3</span>
</a>
</div>Exhibit 2 – Good!
<nav>
<button
aria-selected="false"
aria-label="Slide 1">
</button>
<button
aria-selected="true"
aria-label="Slide 2">
</button>
<button
aria-selected="false"
aria-label="Slide 4">
</button>
</nav><nav>
<button
aria-selected="false">
<img src="…" alt="Slide 1">
</button>
<button
aria-selected="true">
<img src="…" alt="Slide 2">
</button>
<button
aria-selected="false">
<img src="…" alt="Slide 3">
</button>
</nav>Exhibit 3 – Bad!
<th
tabindex="0"
role="button"
aria-label="Sort column"
>Name</th>Exhibit 4 – Bad!*
<span
aria-hidden="true"
role="img"
class="icon">
</span>*Actually not that bad,
but really, what is the point?!
Exhibit 5 – Really Bad!
<body aria-hidden="true">Exhibit 6 – Bad!
<a
href="…"
target="_blank"
title="Click here to
view the video."
tabindex="-1"
role="button"
aria-label="External link"
></a>The Components of ARIA
The Components of ARIA
- Roles
- States and Properties
- Managing Focus
The Components of ARIA
- Roles
- States and Properties
-
Managing Focus
or rather: Keyboard Interaction
Thank You
Eric Eggert
Knowbility, yatil.net, @yatil
https://slides.com/yatil/2017-id24
ARIA Serious?!
By Eric Eggert
