aria-label — Providing Invisible Labels for Assistive Technology

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

aria-label provides an invisible accessible name for an element, used when no visible label exists, such as icon-only buttons, form controls without labels, or elements needing a more descriptive name.

In this tutorial, you'll learn how to use aria-label effectively in your ARIA implementations.

What You'll Learn

By the end of this lesson, you'll know when to use aria-label, how it compares to other labeling methods, the precedence rules for accessible names, and how to avoid common pitfalls.

Why It Matters

Every interactive element needs an accessible name. Screen readers cannot announce what they cannot name. aria-label fills the gap when no visible label is available.

Real-World Use

Doda Browser's toolbar uses aria-label on icon-only buttons for zoom, reload, and settings, ensuring screen reader users know each button's function.

Accessible Name Decision

flowchart TD
  A[Element needs a name] --> B{Visible label exists?}
  B -->|Yes| C[Use aria-labelledby]
  B -->|No| D{Can you add a visible label?}
  D -->|Yes| E[Add a visible label]
  D -->|No| F[Use aria-label]
  F --> G[Test with screen reader]

When to Use aria-label

Use aria-label when the element has no visible text that can serve as its accessible name:

<!-- Icon-only button needs aria-label -->
<button aria-label="Search">
  <svg width="24" height="24" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8" />
    <line x1="16.5" y1="16.5" x2="21" y2="21" />
  </svg>
</button>

<!-- Section with no visible heading -->
<div role="region" aria-label="Quick scan options">
  <p>Content about quick scan settings...</p>
</div>

<!-- Navigation with multiple nav elements -->
<nav aria-label="Main navigation">
  <ul><li><a href="/">Home</a></li></ul>
</nav>
<nav aria-label="Footer navigation">
  <ul><li><a href="/privacy">Privacy</a></li></ul>
</nav>

How aria-label Works

The value of aria-label replaces any visible text content for the element's accessible name:

<button aria-label="Close">X</button>

A screen reader announces "Close button" not "X button". The aria-label overrides the visible text.

Precedence Rules

ARIA has a specific precedence for accessible name computation:

1. aria-labelledby (highest priority)
2. aria-label
3. Native HTML labeling (label element, title attribute)

If both aria-labelledby and aria-label are present, aria-labelledby wins.

Common Mistakes

• Using aria-label when a visible label exists: This can create mismatch between what users see and what screen readers announce.
• Using aria-label for non-interactive elements with visible labels: Landmark regions need labels only when there are multiple instances.
• Making the label too long: Keep labels under 60 characters for reliability.
• Using aria-label on elements that do not support it: Some roles do not participate in accessible name computation.
• Omitting translation: aria-label values must be translated alongside other UI text.

Practice and Challenge

1. What does aria-label provide? An invisible accessible name for an element.

2. When should you use aria-label vs a visible label? Use aria-label when no visible label can be added. Prefer visible labels when possible.

3. What happens if an element has both visible text and aria-label? The aria-label takes precedence and replaces the visible text as the accessible name.

4. Which has higher priority, aria-label or aria-labelledby? aria-labelledby.

5. Challenge: Find three icon-only buttons on a website. Write the aria-label you would add to each.

FAQ

Mini Project

Add aria-label to all icon-only buttons in a toolbar component. Include translation support by passing the label as a prop. Test with a screen reader.

What's Next

Continue to aria-labelledby to learn how to reference visible labels.