USING ARIA ROLES FOR FUN AND PROFIT

Zoltan Hawryluk, zoltan.dulac@gmail.com

ARIA ROLES

Used by Assistive Technologies (like screen readers) to:

  • Announce what type of interactive component the user is focusing on
  • Announce what kind of components are on a page in reading mode
  • Announce the structure of the document of to a user so s/he can jump around a page quickly (these are called landmarks)

The FIVE EIGHT ARIA LANDMARKS

banner <header> A region that contains mostly site-oriented content, rather than page-specific content.
main <main> The main content on a page
navigation <nav> any item that is used to navigate throughout a web page or web site (e.g. a menu)
complementary <aside> (e.g. a sidebar)
contentinfo A large perceivable region that contains information about the parent document.
form <form> Contains a series of inputs that are used to collect information from the user.
search An area that has a search widget
application N/A A web application that overrides normal keyboard/screenreader behaviour and has its own unique user interface. If you don't know what this means, don't use it.

Demo of how they work in screen readers.

other types of roles

live roles

interactive roles

The FIVE RULES OF ARIA

1. THOU SHALT USE NATIVE HTML ELEMENTS WHENEVER POSSIBLE.

why?

  • Don't ask questions!  Just do it! That's a good question!
  • Let's look at an example: role='listbox'

EXCEPTIONS?

2. THOU SHALT not change the semantics of native HTML elements unless absolutely necessary.

DON't

<h2 role="tab">heading tab</h2>

DO

<div role="tab"><h2>heading tab</h2></div>

3. Thou shalt ensure All ARIA controls are usable with a keyboard

4. Thou shalt never use role="presentation" or aria-hidden="true" on a visible focusable element

don't

<button role="presentation">
  press me
</button>

don't

<button aria-hidden="true">
  press me
</button>

do

<button
  style="opacity: 0"
  tabindex="-1"
  aria-hidden="true"
>
  press me
</button>

do

<button
  style="display: none"
  aria-hidden="true"
>
  press me
</button>

5. thou shalt ensure All interactive elements have an accessible name.

DON'T

user name <input type="text">

DON'T

<label>user name</label> <input type="text">

DO

<label for="uname">user name</label>
<input type="text" id="uname">
Made with Slides.com