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.

Difference between revisions of "Using aria-activedescendant to allow changes in focus within widgets to be communicated to Assistive Technology"

Jump to: navigation, search
Line 11: Line 11:
== WCAG references ==
== WCAG references ==
* ensure-compat-rsv: [ SC 4.1.2 Keyboard] (sufficient)
* ensure-compat-rsv: [ SC 4.1.2 Name, Role, Value] (sufficient)
== User Agent and Assistive Technology Support Notes ==
== User Agent and Assistive Technology Support Notes ==

Revision as of 10:14, 1 May 2013



HTML (or other ARIA supporting technologies).

WCAG references

User Agent and Assistive Technology Support Notes

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. When standard controls from accessible technologies are used, this process is straightforward. With ARIA composite widgets, on the other hand, authors should relay this information to assistive technology. 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 associated with that parent element via the aria-owns attribute. needs to be set on the child elementis In HTML4, only form controls and links are focusable, and thus operable via the keyboard. Using the aria-activedescendant attribute allows elements to act as focusable via the keyboard and replaces native focus ability. User agents might react to a change in the aria-activedescendant value in much the same way they would to a focus change, via focus and blur events. As with any ARIA attribute, authors need to manage the aria-activedescendant values directly through scripting. Once this is done, the user agents, in turn, might notify the user of these changes.

The aria-activedescendant attribute is used exclusively 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. This attribute is not, however, useful for replacing native focus capability in single elements which are not part of a larger 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>

This example is shown in operation in an Open Ajax example for combobox.


Related Techniques



  1. For every element that has an aria-activedescendant property, check that the value in the attribute references an id from elements on the current page.
  2. 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

  • Checks #1 and #2 are true