See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to:
See User Agent Support Notes for ARIA6. Also see WAI-ARIA Technology Notes.
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 for
attribute.
The following example shows how aria-label
could be used to distinguish two navigation landmarks in a HTML4 and XHTML 1.0 document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.
<div role="navigation" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>
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 aria-label
.
<div role="region" aria-label="weather portlet">
...
</div>
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="http://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.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.