In this tutorial, you will learn about Role Attribute Usage. We cover key concepts, practical examples, and best practices to help you master this topic.

The role attribute defines an element's semantic meaning for assistive technologies and must be applied correctly, matching the role to the element's behavior and managing required states.

In this tutorial, you'll learn how to apply ARIA role attributes correctly in your ARIA implementations.

What You'll Learn

By the end of this lesson, you'll know how to choose the correct role, combine roles with required states, understand role inheritance, and avoid common role attribute mistakes.

Why It Matters

An incorrect role misleads screen readers. A div with role="slider" that does not support keyboard arrow keys or announce its value is worse than having no role at all.

Real-World Use

Doda Browser's component library validates role usage against the ARIA spec, ensuring every custom widget has the correct role and required attributes.

Role Application Flow

flowchart TD
  A[Choose a role] --> B{Does a native element exist?}
  B -->|Yes| C[Use native element]
  B -->|No| D[Select matching ARIA role]
  D --> E{Does the role have required states?}
  E -->|Yes| F[Add required ARIA states]
  E -->|No| G[Add optional attributes if needed]
  F --> H[Implement keyboard handling]
  G --> H
  H --> I[Test with screen reader]

Choosing the Right Role

The role must match the widget's behavior:

<!-- Correct: this behaves like a toggle button -->
<button role="switch" aria-checked="false" tabindex="0">
  Dark Mode
</button>

<!-- Incorrect: using tab role on something that does not control a panel -->
<div role="tab" onclick="doSomething()">Not a tab</div>

Required States and Properties

Each role has required attributes that must be present:

<!-- checkbox requires aria-checked -->
<div role="checkbox" aria-checked="false" tabindex="0">
  Accept terms
</div>

<!-- slider requires aria-valuemin, aria-valuemax, aria-valuenow -->
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">
  Volume
</div>

Role Inheritance

Some roles inherit requirements from parent roles. A menuitemcheckbox inherits from both menuitem and checkbox:

<div role="menuitemcheckbox" aria-checked="false" tabindex="-1">
  Enable notifications
</div>

This element is focusable within the menu, checkable, and part of the menu structure.

Common Mistakes

• Using a role that does not match behavior: A button that navigates to a page should be a link, not a button.
• Omitting required attributes: A slider without aria-valuenow has no value to announce.
• Using role="none" or role="presentation" incorrectly: These remove semantics from elements that need them.
• Applying roles to elements with conflicting implicit roles: A <button> already has role="button"; adding role="tab" changes its semantics.
• Not managing focus for interactive roles: widget roles need tabindex="0" or participation in roving tabindex.

Practice and Challenge

1. What is the correct role for an element that toggles between on and off? switch or checkbox.

2. What required attribute must a role="checkbox" element have? aria-checked.

3. What is the problem with <h1 role="button">? The h1's implicit heading role is overridden, and it is no longer announced as a heading.

4. Which roles require aria-valuenow? slider, scrollbar, progressbar, and spinbutton.

5. Challenge: Find a custom widget in a web app, identify its role, list its required states, and verify the keyboard interaction pattern matches the role spec.

FAQ

{{< faq "Can I use role="none" to remove semantics from a ?" "Yes, but then the element is no longer announced as a button. Users will not know it is interactive." >}}

What role should a custom dropdown have?

Use combobox for the input and listbox for the options list.

{{< faq "Do I need role="heading" on an

?" "No. The

already has an implicit heading role." >}}

Can I apply multiple roles to one element?

No. The role attribute accepts only one value.

{{< faq "What is the difference between role="presentation" and role="none"?" "They are synonyms. Both remove implicit semantics from the element and its children." >}}

Mini Project

Create a custom slider component with role="slider". Include aria-valuemin, aria-valuemax, aria-valuenow, keyboard arrow key handling, and test it with a screen reader.

What's Next

Continue to aria-label to learn how to provide invisible labels for elements.