Using aria-activedescendant to allow changes in focus within widgets to be communicated to Assistive Technology

From WCAG WG


Status

Applicability

HTML (or other ARIA supporting technologies).

WCAG references

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

  1. 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
Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Using_aria-activedescendant_to_allow_changes_in_focus_within_widgets_to_be_communicated_to_Assistive_Technology&oldid=12661"