This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

From WCAG WG

Status

• Surveyed by TF 25 June 2012
• Discussed by TF 25 June 2012
• 1 Nov 2012: Ready for Review
• Surveyed by WG 10 Jan 2013

Using ARIA labelledby

User Agent Notes

• Jaws V.11 and greater has complete support.
• ChromeVox V.1 and greater has complete support
• VoiceOver V.3 and greater supports ???
• NVDA 2 supports Aria Describedby ???
• Window Eyes as of V.7 ???.

Applicability

As of this writing this technique applies to HTML technologies.

This technique relates to:

• Success Criterion 1.1.1 (Text Alternatives)

Description

The purpose of this technique is to provide descriptions of objects that can be read by assistive technology. The aria-labelledby attribute provides a way to associate an object, such as an form field, with text that is on the page that describes it. This is called a "programmatic association" in WCAG 2. When a screen reader encounters the object, the associated text is read so that the user will know its contents and purpose.

A feature of WAI-ARIA is the ability to associate text with a section, drawing, form element, picture, and so on, using the aria-labelledby property.

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 Landmark heading role value. The region of the document to which the heading pertains to could be marked with the aria-labelledby property containing the value of the id for the header.

<p role="main" aria-labelledby="hdr1">
 <div role="header" id="hdr1" aria-level="1">
    Top News Stories
 </div>
</p>

Example 2

Put some more examples in here:

Example 3

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="123" aria-describedby="info">
<h1 id="123">Calendar<h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
....
</div>

Example 4

Below is an example of using aria-describedby to associate the application and the static text alternative:

....

Resources

WAI ARIA 1.0 Authoring Practices

Related Techniques

• ARIA-XX: Using aria-labelledby to provide labels for objects.
• ARIA-XX: Using aria-label to provide labels for objects.
• 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 where a aria-labelledby role attribute is present.
2. Examine whether the aria-labelledby attribute is programatically associated with the text description to which it refers, via the id attribute on the element where the text alternative is found.
3. Examine whether the text label accurately describes labels or serves the equivelent purpose to the object.

Expected Results

Tests #1, #2 and #3 are true.