← Lessons

quiz vs the machine

Gold1380

Frontend

The Accessible Name Computation

Understand the priority order the browser uses to decide what an element is called for assistive tech.

5 min read · core · beat Gold to climb

What an accessible name is

The accessible name is the short label assistive technology speaks when it reaches an element, such as the word a screen reader says for a button. The browser computes this name from several possible sources and resolves conflicts using a fixed priority order. Knowing that order explains why some labels win and others are silently ignored.

The priority order

The computation walks sources from highest to lowest priority and uses the first one that produces text.

  • aria-labelledby wins first, pointing to other elements whose text becomes the name.
  • aria-label comes next, supplying a direct string.
  • Native labeling follows, such as a label element tied to an input or a buttons text.
  • The title attribute is a last resort fallback.

Why the order matters

Because a higher source overrides everything below it, an empty or careless aria-label can hide perfectly good visible text. A button reading Submit order might be announced only as a vague word if an aria-label overrides it.

  • Prefer visible text so the spoken name matches what people see.
  • Reach for aria-label only when no visible text exists.
  • Avoid relying on title, since it is fragile and often unspoken.

Matching the accessible name to the visible label also helps voice control users, who speak the words they see to activate a control.

Key idea

The browser builds an accessible name from a fixed priority order, so a stray aria-label can override visible text and the spoken name should match what users see.

Check yourself

Answer to earn rating on the learn ladder.

1. Which source has the highest priority in the accessible name computation?

2. Why should the accessible name usually match visible text?