Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to Success Criterion 1.3.1: Info and Relationships (Sufficient).
The purpose of this technique is to provide names for regions of a page that can be
read by assistive technology. The
aria-labelledby attribute provides a way to associate an section of the page marked up as a region
or landmarks with text that is on the page that labels it.
Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.
aria-labelledby can accept multiple ids to point to other regions of the page using a space separated
list. It is also limited to ids for defining these sets.
Example 1: Identify a landmark with on-page text
Below is an example of
aria-labelledby used on a complementary Landmark. The region of the document to which the heading
pertains could be marked with the
aria-labelledby property containing the value of the
id for the header.
<div role="complementary" aria-labelledby="hdr1"> <h1 id="hdr1"> Top News Stories ... </h1> </div>
Example 2: Identification for Application landmarks
The following code snippet for application landmarks with static prose. If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:
<div role="application" aria-labelledby="p123" aria-describedby="info"> <h1 id="p123">Calendar<h1> <p id="info"> This calendar shows the game schedule for the Boston Red Sox. </p> <div role="grid"> ... </div>
Resources are for information purposes only, no endorsement implied.
- Examine each element with attribute role=region or with a landmark role, where an aria-labelledby attribute is also present.
- Check that the value of the aria-labelledby attribute is the id of an element on the page.
- Check that the text of the element with that id accurately labels the section of the page.
- #2 and #3 are true.