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.
Using aria-labelledby to name controls
From WCAG WG
- 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 ???.
As of this writing this technique applies to HTML technologies.
This technique relates to:
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.
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.
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>
Put some more examples in here:
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>
Below is an example of using aria-describedby to associate the application and the static text alternative:
- 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
- Examine each element where a
aria-labelledbyrole attribute is present.
- Examine whether the
aria-labelledbyattribute is programatically associated with the text description to which it refers, via the
idattribute on the element where the text alternative is found.
- Examine whether the text label accurately describes labels or serves the equivelent purpose to the object.
Tests #1, #2 and #3 are true.