CodePark/ questions / Accessibility & ARIA
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Accessibility & ARIA

What is an accessible name? Explain the difference between aria-label, aria-labelledby and aria-describedby.

<h2 id="billing">Billing address</h2>
<section aria-labelledby="billing">...</section>

<button aria-label="Close dialog">×</button>

<input id="pw" type="password" aria-describedby="pw-hint">
<p id="pw-hint">At least 12 characters.</p>

The accessible name is what assistive technology (AT), such as a screen reader, announces to identify an element. For example: "Close dialog, button". Interactive elements and landmarks need one. A landmark is a main region of the page, like nav or a named section.

Three attributes are involved:

  • aria-labelledby points to the id of one or more visible elements. Their text becomes the name. It has the highest priority.
  • aria-label gives the name directly as a string. It is useful for icon-only buttons with no visible text. But sighted users can't see it, and translation tools often miss it.
  • aria-describedby does not set the name. It adds an extra description, announced after the name and the role. Use it for hints, formats or error messages.

If neither aria-labelledby nor aria-label is present, the name comes from native sources. These are a label, the element's own text content, or alt.

  • The accessible name is what assistive technology announces to identify the element.
  • Name priority: aria-labelledby first, then aria-label, then the native label or content.
  • Prefer visible text (aria-labelledby or a label) over aria-label.
  • aria-describedby adds a description, not the name.