Using aria-labelledby to name regions and landmarks
Contents
Status
- Surveyed by TF 03 Oct 2013
- Added to XML by AWK 2014/1/2
User Agent Notes [To be published separately]
Applicability
This technique applies to HTML5 technologies.
This technique relates to:
Description
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.
Like aria-describedby
, 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.
Examples
Example 1
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.
<p role="complementary" aria-labelledby="hdr1"> <h1 id="hdr1"> Top News Stories </h1> </p>
Example 2
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
- WAI ARIA 1.0 Authoring Practices
- HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation
Related Techniques
- Using aria-labelledby to provide a text alternative for non-text content
- Using aria-label to provide labels for objects
- Using aria-labelledby to concatenate a label from several text nodes
- Using aria-labelledby to provide a name for user interface controls
- Using aria-labelledby for link purpose
- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- H45: Using longdesc
Tests
Procedure
- Examine each element with attribute
role=region
or with a landmark role, where anaria-labelledby
attribute is also present. - Check that the value of the
aria-labelledby
attribute is theid
of an element on the page. - Check that the text of the element with that
id
accurately labels the section of the page.
Expected Results
Checks #2 and #3 are true.