Aria roles

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Aria roles

ARIA (Accessible Rich Internet Applications) provides a list of attributes that lets you make the web accessible for screen readers.

There are three kinds of ARIA attributes.

1. Roles
2. Properties
3. States

Aria-roles help screen readers define the type of element they’re on while aria-properties and aria-states help screen readers understand the state of the role.

In practice, we don’t differentiate between aria-properties and aria-states. We use these two words interchangeably. Sometimes, we simply call them aria attributes.

You can find a list of roles, and properties in the specification.

We’ll talk about roles in this lesson.

Using aria-roles

Aria-roles define the type of element a screen reader is on.

There are two ways to declare roles:

1. Use an HTML element with an implicit role
2. Use the role attribute

HTML elements with implicit roles

Many HTML elements contain an implicit aria-role. If you use these elements, you don’t need to use the role attribute.

For example, the button element has a role set to button. If you use <button>, you don’t need to write role="button"

<button>This is a button</button>

If you navigate to the button element on Voiceover, you’ll hear “This is a button, button”.

• “This is a button” comes from the textContent within the button element.
• “button” comes from the <button> element. It tells the user they’re on a button.

If you navigate to the button element on NVDA, you’ll hear “button, This is a button”. The reading order differs, but the message remains the same.

Note: I’ll show you Voiceover videos most of the time since I use a Mac. I’ll supplement with NVDA videos when I need to make a specific point with NVDA.

Elements with implicit roles

Here are examples of elements with implicit roles. You should know most of them already 😉.

Using the role attribute

You can use the role attribute to tell screen readers what the element is. Screen readers will announce the role faithfully (whenever possible).

This means you can deceive screen readers into thinking a <div> is a <button>.

<button>Real button</button>

<!-- Don't do this! -->
<div role="button">Fake button</div>

If you use a role attribute, you need to provide the users with functionality that accompanies the role. For example, if you use role="button", you need to make sure users can interact with your “button” with Space and Enter keys.

For this reason, you should always use HTML elements over roles. Only use the role attribute if no HTML elements can do the job.

If you use role on an element with an implicit role, the role property takes precedence.

<!-- Don't do this! -->
<button role="banner">Banner 😈</button>

You should not overwrite a role unless it makes sense. You’ll see a real example of what “makes sense” means when you make Tabby accessible.

Nested roles

If a role is nested in another role, screen readers will read both roles when you enter the element for the first time. They may omit the external role on subsequent elements.

<main>
  <button>Button 1</button>
  <button>Button 2 </button>
  <button>Button 3</button>
</main>

That’s it!

Next up

ARIA can be really confusing. You need to understand every aria-roles and aria-properties available. You also need to learn when to use each role and each property.

I found it useful to understand aria-roles first. So, I’ll share everything you need to know about aria-roles in the next 6 of lessons.

I’ll go in the following order:

1. Landmark roles
2. Document structure roles
3. Live region roles
4. Widget roles
5. Window roles
6. Abstract Roles

Have patience as you go through the next 6 lessons. You’ll realize you already know most aria-roles because they’re built into HTML.