ARIA attributes that can save you:
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
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...)
Three ARIA attributes are very well supported by browsers and AT:
aria-describedby. They allow to add extra information to an HTML tag:
aria-labelledbyallow to give an accessible name to an element
aria-describedbyallows 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:
- elements with an explicit landmark role, therefore, with a
roleattribute or an implicit landmark (a HTML5 structural tag:
- 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-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.
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.
aria-labelledby can admit several values separated by a space and can self-refer. It also works with pseudo-class generated content CSS
::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
When the two attributes
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.
<button aria-label="Access 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"