ARIA Serious? 2018
Eric Eggert
AccessU 2018 · May 2018
http://slides.com/yatil/2018-05-accessu-aria-serious
Eric Eggert
Web Accessibility Specialist @
Knowbility (Assessments, Teaching)
50% W3C Fellow → WAI/EOWG
📍
Important Note:
This presentation contains ARIA examples that are preventing websites and applications from being accessible.
Don’t copy & paste mindlessly.
WAI-ARIA:
Accessible Rich
Internet Applications
Internet Applications
ARIA ≠ 🧙♀️
No
aria-make-accessible="true"
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
<!-- (BAD) -->
<h1 role="button">heading button</h1><!-- (GOOD!) -->
<h1><button>heading button</button></h1>Example
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
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 3a – Bad!
Exhibit 4 – Bad!*
<span
aria-hidden="true"
role="img"
class="icon">
</span>*Actually not harmful,
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>