Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to Success Criterion 2.4.4: Link Purpose (In Context) (Sufficient as a way to meet an unwritten technique).
aria-labelledby attribute, authors can use a visible text element on the page as a label for a focusable
element (a form control or a link). For example, a "read more..." link could be associated
with the text of the heading of the preceding section to make the purpose of the link
unambiguous (see example 1).
When associating text to a focusable element with the help of
aria-labelledby, the target text element is given an ID which is referenced in the value of the
aria-labelledby attribute of the focusable element.
It is also possible to use several text elements on the page as a label for a focusable
element. Each of the text elements used must be given a unique ID which is referenced
as a string of IDs (IDREF) in the value of the
aria-labelledby attribute. The label text should then be concatenated following the order of IDs
in the value of the
When applied on links,
aria-labelledby can be used to identify the purpose of a link that may be readily apparent for sighted
users, but less obvious for screen reader users.
The specified behavior of
aria-labelledby is that the associated label text is announced instead of the link text (not in addition
to the link text). When the link text itself should be included in the label text,
the ID of the link should be referenced as well in the string of IDs forming the value
For more information on the naming hierarchy please consult the Accessible Name and Description Computation and the accessible name and description calculation for links in the HTML to Platform Accessibility APIs Implementation Guide.
Resources are for information purposes only, no endorsement implied.
For each link that has an
- Check that each ID in the value of the
aria-labelledbyattribute matches an ID of a text element used as part of the link purpose.
- Check that the combined value of the text referenced by the one or more ID's in the
aria-labelledbyattribute properly describes the purpose of the link element.
- Checks #1 and #2 are true.