Standards · ARIA

Property Relationship

aria-label

Provides an accessible name as a string when no visible text is available. Use only when there is no on-screen label — if visible text exists, prefer aria-labelledby so the spoken name matches what the user sees.

When to use

When a control has no visible text — icon-only buttons, search fields with only a magnifying-glass glyph, close (×) buttons, social-media link icons. The string you put in aria-label becomes the element’s accessible name, and screen readers announce it in place of any inner text.

The native HTML equivalent is the <label> element for form inputs, or visible button text. Reach for aria-label only when neither of those is possible.

How it behaves

Takes a single string. Whatever you put in aria-label overrides any visible text inside the element — the accessible name is what AT users hear, but it is invisible to sighted users. That asymmetry is the source of most failures with this attribute.

The string is not translated automatically. If your site supports multiple languages, the aria-label value has to be localized like any other UI string. Screen readers also treat the value as plain text — no HTML, no line breaks, no markup.

If the element has visible text, prefer aria-labelledby pointing at that text, so the visible label and the accessible name stay in sync.

Common failures

  • Putting aria-label="Click here" on a button that already says “Submit order” — the visible text is now hidden from the AT, and the user hears the wrong thing.
  • Violating WCAG 2.5.3 Label in Name: aria-label="Submit" on a button whose visible text says “Send order” means a voice-control user cannot say “click Send order” to operate it.
  • Adding aria-label to a non-interactive element like a <div> or <span> — most browsers ignore it because the element has no role that supports a name.
  • Leaving the value untranslated when the rest of the page is in another language.
  • Using aria-label instead of a real <label> on a form field, breaking the click-the-label-to-focus-the-field affordance.
  • Stuffing instructions into aria-label instead of aria-describedby. The name should be short; help text goes in the description.

Example

<!-- Icon-only button: no visible text, aria-label is required -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Visible text + icon: do NOT use aria-label here -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Close dialog
</button>