Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to:
- Success Criterion 1.3.1: Info and Relationships (Sufficient)
- Success Criterion 4.1.2: Name, Role, Value (Sufficient)
- Success Criterion 4.1.2: Name, Role, Value (Sufficient as a way to meet an unwritten technique)
- Success Criterion 4.1.2: Name, Role, Value (Sufficient as a way to meet G10: Creating components using a technology that supports the accessibility notification of changes)
The purpose of this technique is to provide names for user interface controls that
can be read by assistive technology. WAI-ARIA provides a way to associate text with
a section, drawing, form element, picture, and so on, using the
aria-labelledby property. This techniques uses the
aria-labelledby attribute to associate a user interface control, such as a form field, with text
on the page that labels it.
aria-labelledby can accept multiple ids to point to other elements of the page using a space separated
list. This capability makes
aria-labelledby especially useful in situations where sighted users use information from the surrounding
context to identify a control. ARIA9: Using aria-labelledby to concatenate a label from several text nodes contains more examples of situations where names are created from several other text
elements on the page.
While the function of aria-labelledby appears similar to the native HTML label element, there are some differences:
aria-labelledbycan reference more than one text element;
labelcan only reference one.
aria-labelledbycan be used for a variety of elements while the
labelelement can only be used on form elements.
- Clicking on a
labelfocuses the associated form field. This does not occur with
aria-labelledby. If this behaviour is required then use
labelor implement this functionality using scripting.
Note that as of December 2013,
label has better support than
aria-labelledby, especially in older browsers and assistive technologies.
Example 1: Labelling a simple text field
The following is an example of
aria-labelledby used on a simple text field to provide a label in a situation where there is no text
available for a dedicated label but there is other text on the page that can be used
to accurately label the control.
<input name="searchtxt" type="text" aria-labelledby="searchbtn"> <input name="searchbtn" id="searchbtn" type="submit" value="Search">
Example 2: Labelling a slider
Below is an example of
aria-labelledby used to provide a label for a slider control. In this case the label text is selected
from within a longer adjacent text string. Please note that this example is simplified
to show only the labeling relationship; authors implementing custom controls also
need to ensure that controls meet other success criteria.
<p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p> <div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div>
Example 3: A label from multiple sources
The following example of
aria-labelledby with multiple references uses the
label element. For additional detail on concatenating multiple sources of information into
a label with
aria-labelledby, please view the technique ARIA9: Using aria-labelledby to concatenate a label from several text nodes.
<label id="l1" for="f3">Notify me</label> <select name="amt" id="f3" aria-labelledby="l1 f3 l2"> <option value="1">1</option> <option value="2">2</option> </select> <span id="l2" tabindex="-1">days in advance</span>
Note: The use of the
label element is included for a number of reasons. If the user clicks on the text of the
label element, the corresponding form field will receive focus, which makes the clicking
target larger for people with dexterity problems. Also the
label element will always be exposed via the accessibility API. A
span could have been used (but if so, it should receive a tabindex="-1" so that it will
be exposed via the accessibility API in all versions of Internet Explorer). However,
span would lose the advantage of the larger clickable region.
Resources are for information purposes only, no endorsement implied.
For each user interface control element where an
aria-labelledby attribute is present:
- Check that the value of the
aria-labelledbyattribute is the
idof an element or a space separated list of
ids on the web page.
- Check that the text of the referenced element or elements accurately labels the user interface control.
- #1 and #2 are true.