ARIA attributes that can save you

  • Web
  • Intermediate

Introduction #

Accessible name and description #

An accessible name is the information that allows assistive technology (AT), for example, a screen reader or a magnification program, to identify a given element (HTML tag). It can be provided by the title or content of an element, an attribute (for example, an alt attribute for an image) or by an associated element (for example, a label tag for a input field).

An accessible description is more extensive information that is used by the AT allowing it to complete the accessible name by specifying and adding meaning where the accessible name is not sufficient.

The accessible name as the accessible description can be visually noticeable or not (link title: visible, alternative image: hidden and usable only by AT...)

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

Three ARIA attributes are very well supported by browsers and AT: aria-label, aria-labelledby and aria-describedby. They allow to add extra information to an HTML tag:

  • aria-label, aria-labelledby allow to give an accessible name to an element
  • aria-describedby allows to add to the accessible name, if necessary, in addition, an accessible description to an element

However, they only work well with some elements:

  • interactive elements: a (with href attribute), audio and video (with controls attribute), input (exept type="hidden"), select, button and textarea
  • img and iframe elements
  • elements with an explicit landmark role, therefore, with a role attribute or an implicit landmark (a HTML5 structural tag: header, footer, main, nav, aside and section)
  • One of the ARIA widget roles (27 in ARIA 1.1).

For any other HTML element, these three ARIA attributes have few or even random support depending on the AT / browser pair, so do not use as the only way of giving necessary information.

Should it be used and how? #

Yes, we can use these three ARIA attributes on the elements with which it works (see above) to pass essential information specifically to AT.

You should know that aria-label must contain, as a value, a string of characters that will be the accessible name. While for aria-labelledby and aria-describedby, the value of this attribute references one or more (space separated) id (auto referencing possible) of page elements whose content will be used as the accessible name of the element.

When using aria-label or aria-labelledby on an element, the content or title of that element is no longer rendered to AT but replaced by the accessible name (for aria-label the contents of this attribute, for aria-labelledby the contents of the referenced element). Therefore, only the accessible name must give all the necessary information to AT and therefore to the user.

Important: attribute aria-labelledby can admit several values separated by a space and can self-refer. It also works with pseudo-class generated content CSS ::before or ::after. You can also reference content that is visually hidden by: CSS, visibility: hidden; or display: none;, and with the HTML5 attribute hidden. However, best practices require that if the interface is such that it is not possible to have a visible text label on the screen, it is better to use aria-label rather than aria-labelledby.

When the two attributes aria-labelledby and aria-label are used, user agents give priority to aria-labelledby when calculating the accessible name property.

At last, `aria-describedby' will add an accessible description in addition to the accessible name of the element.

Examples #


<button aria-label="Access html (Hypertext markup language)">html</button>

Screen reader output: "Access Hypertext markup language"


<h2 id="titre">HTML source<h2>
<button aria-label="Access Hypertext markup language" aria-labelledby="titre">html</buttton>

Screen reader output: "HTML source"


<h3 id="titre">Login page sourcecode<h3>
<button aria-label="Access HTML" aria-describedby="titre">html</buttton>

Screen reader output: "Access HTML Login page sourcecode"