Using aria-labelledby to name regions and landmarks

Status

• Surveyed by TF 03 Oct 2013
• Added to XML by AWK 2014/1/2

Applicability

This technique applies to HTML5 technologies.

This technique relates to:

• Success Criterion 1.3.1 (Info and Relationships)

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

1. Examine each element with attribute role=region or with a landmark role, where an aria-labelledby attribute is also present.
2. Check that the value of the aria-labelledby attribute is the id of an element on the page.
3. 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.