Labeling Methods — aria-label and aria-labelledby

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

When a visible label element is not practical, ARIA provides aria-label and aria-labelledby to give form controls an accessible name.

What You'll Learn

How to use aria-label and aria-labelledby, when to choose each method, and how they interact with native HTML labeling.

Why It Matters

Some designs cannot accommodate visible labels (search icons, icon-only buttons). ARIA labeling ensures these controls still have an accessible name for screen readers.

Real-World Use

A search form with a magnifying glass icon button. The button has no visible text but uses aria-label="Search the site" so screen reader users know its purpose.

ARIA Labeling Examples

<!-- aria-label on a text input -->
<input type="text" id="search" aria-label="Search products">

<!-- aria-labelledby referencing a heading -->
<h2 id="section-title">Shipping Address</h2>
<input type="text" aria-labelledby="section-title street-label" id="street">
<label id="street-label" for="street">Street address</label>

<!-- aria-label on a search button -->
<button aria-label="Search">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Priority Order

Screen readers compute the accessible name in this order:

1. aria-labelledby (highest priority)
2. aria-label
3. Native label element (for/id)
4. placeholder attribute
5. title attribute

<!-- aria-label overrides the label text -->
<label for="name">Full name</label>
<input type="text" id="name" aria-label="Legal name">

Combining Text Sources

<p id="password-desc">Must be at least 8 characters</p>
<input type="password" id="password"
       aria-labelledby="password-label password-desc">
<label id="password-label" for="password">Password</label>

Common Mistakes

1. Using aria-label on a label element

aria-label on a label is ignored. Apply it to the form control directly.

2. aria-labelledby pointing to non-existent id

The reference breaks silently. Always verify the target id exists.

3. Overriding a visible label unintentionally

aria-label replaces the visible label text for screen readers, which can confuse users if the text differs.

4. Using aria-label for complex descriptions

Use aria-describedby for descriptions, not aria-label.

5. Forgetting to support both visual and ARIA

A visual label should exist alongside ARIA attributes for sighted users.

Practice Questions

1. What is the highest priority accessible name method? aria-labelledby has the highest priority, overriding all other naming methods.

2. When should you use aria-label instead of a label element? When a visible label is not possible in the design, such as icon-only buttons or search fields.

3. What happens when aria-labelledby references multiple ids? The text content of all referenced elements is concatenated in order to form the accessible name.

Challenge: Create a search form with an icon-only button that has no visible text. Use aria-label to give the button an accessible name. Test with a screen reader.

FAQ

Mini Project

Create an icon-only button toolbar with three buttons. Each button uses aria-label to describe its action. Verify that a screen reader announces the correct label for each button.

What's Next

Learn about Fieldset and Legend for grouping related form controls and providing group-level labels.