Using aria-activedescendant to allow changes in focus within widgets to be communicated to Assistive Technology
Contents
Status
- New technique.
- Surveyed 30 Oct 2012
Applicability
HTML (or other ARIA supporting technologies).
WCAG references
- ensure-compat-rsv: SC 4.1.2 Name, Role, Value (sufficient)
User Agent Notes [To be published separately]
What is the support status in AT?
- Yet to be checked
Description
The objective of this technique is to ensure that assistive technology
can gather information about the current active child of a composite widget by setting the aria-activedescendant
attribute of a relevant element. The aria-activedescendant
attribute can be set on any child element of the widget, which can be either a DOM descendant of the widget's parent element, or be associated with that parent element via the aria-owns
attribute.
The aria-activedescendant
attribute is generally used in composite widgets where a container element is focusable, and its child elements are not natively focusable. In such cases, this attribute replaces the need for focusable child elements within the container by notifying the user agent of the current active child element within the widget.
Examples
Example 1: Combobox
A page contains a combobox composed of a textbox and a dropdown list of values which the user may choose from. The chosen list item becomes the value of the textbox. As the user navigates through the list via arrow keys, the aria-activedescendant
property is adjusted to reflect the id attribute of the current child element which has been navigated to.
<input type="text" aria-activedescendant="cb1-opt6" aria-readonly="true" aria-owns="cb1-list" aria-autocomplete="list" role="combobox" id="cb1-edit"> <ul aria-expanded="true" role="listbox" id="cb1-list"> <li role="option" id="cb1-opt1">Alabama</li> <li role="option" id="cb1-opt2">Alaska</li> <li role="option" id="cb1-opt3">American Samoa</li> <li role="option" id="cb1-opt4">Arizona</li> <li role="option" id="cb1-opt5">Arkansas</li> <li role="option" id="cb1-opt6">California</li> <li role="option" id="cb1-opt7">Colorado</li> </ul>
Resources
Related Techniques
Tests
Procedure
- For every element that has an
aria-activedescendant
property, check that the content at each id is the active child of its parent container.
Expected Results
- Check #1 is true