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-activedescendant to allow changes in focus within widgets to be communicated to Assistive Technology
- New technique.
- Surveyed 30 Oct 2012
HTML (or other ARIA supporting technologies).
- 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
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-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.
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>
This example is shown in operation in an Open Ajax example for combobox.
- For every element that has an
aria-activedescendantproperty, check that the content at each id is the active child of its parent container.
- Check #1 is true