ARIA Labels Explained: aria-label, aria-labelledby, and aria-describedby

What is ARIA?

WAI-ARIA (Accessible Rich Internet Applications, from the W3C's Web Accessibility Initiative) is a specification that allows developers to make web content and applications more accessible to people with disabilities. It provides a set of attributes that define semantics, roles, and states that native HTML might lack.

The first rule of ARIA use: if a native HTML element (like <button> or <nav>) does the job, use it instead of adding ARIA. As the ARIA Authoring Practices Guide puts it, no ARIA is better than bad ARIA.

Providing Accessible Names

When an interactive element (like an icon button) lacks visible text, screen readers need an "accessible name" to announce what the element does. ARIA provides several ways to do this.

1. aria-label

Use aria-label to directly provide a string as the accessible name. This text will not be visible on the screen but will be announced by screen readers.

<!-- An icon-only button -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

2. aria-labelledby

Use aria-labelledby when the accessible name is already visible elsewhere on the page. You pass the id of the element containing the text. This is useful for associating a heading with a complex widget or a custom form control.

<h2 id="billing-title">Billing Information</h2>
<div role="region" aria-labelledby="billing-title">
  <!-- billing form here -->
</div>

3. aria-describedby

Use aria-describedby to provide additional, non-essential descriptive text or instructions. Like aria-labelledby, it references the id of another element. Screen readers typically announce the accessible name first, pause, and then announce the description.

<label for="password">Password</label>
<input type="password" id="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 8 characters long.</p>

Naming Calculation Order

When the browser computes an element's accessible name (which screen readers then announce), it follows a strict priority:

1. aria-labelledby (Highest priority)
2. aria-label
3. Native HTML labeling (e.g., <label for="...">, alt on images)
4. Element's inner text content
5. title attribute (Lowest priority)