Section 26: ARIA Roles, States and Properties

Learning Objectives

Understand what ARIA means.
Use aria-label, aria-labelledby and aria-describedby.
Understand aria-expanded, aria-hidden and aria-live.
Learn why native HTML semantics should be preferred.

1. What Is ARIA?

ARIA stands for Accessible Rich Internet Applications. It provides attributes that communicate roles, states and properties to assistive technologies. ARIA does not automatically add keyboard behavior, validation or application functionality.

2. The First Rule of ARIA

Prefer native HTML elements whenever they already provide the required semantics and behavior.

<!-- Prefer a native button -->
<button type="button">Open Menu</button>

<!-- Avoid this when a button is appropriate -->
<div role="button" tabindex="0">Open Menu</div>

A div with role="button" does not automatically gain the keyboard and activation behavior of a native button.

3. aria-label

aria-label provides an accessible name when visible text is not available or is insufficient. It is useful for icon-only controls.

<button type="button" aria-label="Close dialog">
  &times;
</button>

When a visible label already provides the correct accessible name, avoid adding an unnecessary aria-label that could override it.

4. aria-labelledby

aria-labelledby uses the text of one or more elements to name another element.

<h2 id="search-heading">Search Courses</h2>
<form aria-labelledby="search-heading">
  <label for="course-search">Search term</label>
  <input id="course-search" name="q" type="search">
  <button type="submit">Search</button>
</form>

5. aria-describedby

aria-describedby associates additional explanatory text with a control. It is useful for instructions or error messages.

<label for="password">Password</label>
<input id="password" name="password" type="password"
  aria-describedby="password-help" required>
<p id="password-help">Use a long, unique password.</p>

6. aria-expanded

aria-expanded communicates whether a control's associated expandable content is open or closed. The value must reflect the actual interface state.

<button type="button" aria-expanded="false"
  aria-controls="course-menu">
  Courses
</button>

<ul id="course-menu" hidden>
  <li><a href="/courses/html">HTML</a></li>
  <li><a href="/courses/css">CSS</a></li>
</ul>

This static example starts closed. A real interactive menu needs JavaScript to toggle hidden and update aria-expanded together.

ARIA Roles & Attributes