Home techniquesaria label labelledby describedby

ARIA attributes aria-label, aria-labelledby and aria-describedby

The accessible name allows to identify an element and returns it to technical assistance (TA). It is provided by:

  • the text of the element,
  • an attribute (an alt attribute on an <image>),
  • or by an associated element (a <label> tag for example).

An accessible description allows to give additional information to an accessible name.

  • aria-label and aria-labelledby provide an accessible name to an element;
  • aria-describedby provides a description to the accessible name.

How to use them?

  • aria-label expects a string of characters in value, it will be the accessible name;
  • aria-labelledby and aria-describedby refer to the element id(s) on the page.
Important

When using aria-label or aria-labelledby, the text of the element is no longer returned to the TA. It is replaced by the accessible name. The accessible name must therefore contains all the information necessary for the user.

Tip

aria-labelledby and aria-describedby can admit several values separated by a space and can self-reference.

aria-label

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

The render in AT: Close
The content of the button is not rendered, aria-label attribute override it.

aria-labelledby

<p id="name">Name</p>
<input type="text" aria-labelledby="name">

The render in AT: Name

<a href="http://www.w3c.org" aria-labelledby="label">W3C</a>
<p id="label" hidden>W3C World Wide Web Consortium</p>

render in AT : W3C World Wide Web Consortium Link
Override the content of the element. Only aria-labelledby attribute is rendered in the AT.

aria-describedby

<a href="http://www.w3c.org" aria-describedby="description">W3C</a>
<p id="description">World Wide Web Consortium</p>

render in AT : W3C Link World Wide Web Consortium
The content of the element and the aria-describedby attribute element are rendered in the AT.

aria-labelledby and aria-describedby

<p id="birdthday">Birthday</p>
<input type="text" aria-labelledby="birdthday" aria-describedby="dateformat">
<p id="dateformat">(yyyy/mm/dd)</p>

The render in AT: Birthday (yyyy/mm/dd)