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.

7. aria-hidden

aria-hidden="true" removes an element and its descendants from the accessibility tree. It does not visually hide the element.

<span aria-hidden="true">★</span>
<span>5 out of 5 stars</span>

Do not apply aria-hidden="true" to focusable elements or their ancestors while they remain keyboard-accessible. Use the HTML hidden attribute when content should be hidden visually and from assistive technology.

8. aria-live

aria-live can announce dynamic updates to assistive technology. It is useful for messages such as form submission results.

<p id="status" role="status" aria-live="polite"></p>

When JavaScript updates the text, assistive technology may announce the change. Use live regions thoughtfully; frequent or unnecessary announcements can be disruptive.

9. Accessible Error Messages

<label for="user-email">Email</label>
<input id="user-email" name="email" type="email"
  aria-describedby="email-error" aria-invalid="true">
<p id="email-error">Enter a valid email address.</p>

In this example, the field is already in an invalid state. A real application should set aria-invalid and update the error text according to actual validation results. Do not mark a field invalid before it has actually failed validation unless that is appropriate for the interface.

Common Mistakes

• Using ARIA when a native semantic element already works.
• Adding roles without implementing the expected keyboard interaction.
• Leaving aria-expanded unchanged when a panel opens or closes.
• Using aria-hidden to hide content visually.
• Adding aria-live regions that announce too many changes.

Practice Exercises

1. Add an accessible name to an icon-only close button.
2. Associate a password field with help text using aria-describedby.
3. Build a static expandable-menu example using aria-controls and aria-expanded.
4. Explain why a native button is usually better than a clickable div.

Revision Quiz

1. What does ARIA stand for?
2. What does aria-label provide?
3. Which attribute associates a control with descriptive help text?
4. What does aria-expanded communicate?
5. Does aria-hidden visually hide an element?
6. Does ARIA automatically implement keyboard behavior?

Answer Key and Explanations

1. Accessible Rich Internet Applications — ARIA adds accessibility semantics to interfaces.
2. An accessible name — It can name a control when visible text is not sufficient.
3. aria-describedby — It points to text that describes the control.
4. Whether associated content is expanded — Its value should match the interface state.
5. No. It hides content from the accessibility tree, not from visual display.
6. No. Keyboard behavior must be implemented or provided by native HTML.