Eric Eggert – OsloMet – 4&5 December 2018
https://slides.com/yatil/2018-oslomet2
Page Regions
Button pressed?
Section Expanded?
Labels/Live Regions*
Application menu?
Expand/Collapse?
Dialog?
Roles:
Attributes:
No aria-make-accessible="true"
5 Rules of ARIA (according to Notes on Using ARIA in HTML)
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.
Do not change native semantics, unless you really have to .
<!-- (BAD) -->
<h1 role="button">heading button</h1><!-- (GOOD!) -->
<h1><button>heading button</button></h1>All interactive ARIA controls must be usable with the keyboard.
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.
Do not use role="presentation" or aria-hidden="true" on a visible focusable element.
All interactive elements must have an accessible name.
<a id="airline-logo" href="…"
class="logo"
aria-label="Airline Name">
</a><a id="logo" href="…">
<img src="…" alt="Airline Name">
</a>
<a id="logo" href="…">
<svg>
<title>Airline Name</title>
…
</svg>
</a><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><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><th
tabindex="0"
role="button"
aria-label="Sort column"
>Name</th><span
aria-hidden="true"
role="img"
class="icon">
</span>*Actually not harmful,
but really, what is the point?!
<body aria-hidden="true"><a
href="…"
target="_blank"
title="Click here to
view the video."
tabindex="-1"
role="button"
aria-label="External link"
></a>