Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to Success Criterion 1.1.1: Non-text Content (Sufficient).
The purpose of this technique is to provide a label for objects that can be read by
assistive technology. The
aria-label attribute provides the text label for an object, such as a button. When a screen
reader encounters the object, the
aria-label text is read so that the user will know what it is.
Authors should be aware that
aria-label may be disregarded by assistive technologies in situations where
aria-labelledby is used for the same object. For more information on the naming hierarchy please
consult the ARIA specification and the accessible name and description calculation in the HTML to Platform Accessibility APIs Implementation Guide. Authors should be
aware that use of
aria-label will override any native naming such as
alt on images or
label associated with a form field using the
Example 2: Identifying region landmarks
The following example shows how a generic "region" landmark might be added to a weather
portlet. There is no existing text on the page that can be referenced as the label,
so it is labelled with
<div role="region" aria-label="weather portlet"> ... </div>
Example 3: Providing a label for Math
Below is an example of a MathML function, using the math role, appropriate label, and MathML rendering:
<div role="math" aria-label="6 divided by 4 equals 1.5"> <math xmlns="https://www.w3.org/1998/Math/MathML"> <mfrac> <mn>6</mn> <mn>4</mn> </mfrac> <mo>=</mo> <mn>1.5</mn> </math> </div>
Resources are for information purposes only, no endorsement implied.
For each element where a
aria-label attribute is present.
- Examine whether the text description accurately labels the object or provides a description of its purpose or provides equivalent information.
- #1 is true.