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"

From WCAG WG
Jump to: navigation, search
Line 20: Line 20:
 
== Description ==
 
== Description ==
  
The objective of this technique is to ensure that [http://www.w3.org/WAI/PF/aria/terms#def_at <code>assistive technology</code>] can gather information about the current active child of a composite widget by setting the [http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant <code>aria-activedescendant</code>] attribute of a relevant element. When standard controls from accessible technologies are used, this process is straightforward. With <code>ARIA</code> composite widgets, on the other hand, authors should relay this information to <code>assistive technology</code>. The [http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant <code>aria-activedescendant</code>] 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 [http://www.w3.org/WAI/PF/aria/states_and_properties#aria-owns <code>aria-owns</code>] 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 <code>aria-activedescendant</code> attribute allows elements to act as focusable via the keyboard and replaces native focus ability. User agents might react to a change in the <code>aria-activedescendant</code> 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 <code>aria-activedescendant</code> values directly through scripting. Once this is done, the user agents, in turn, might notify the user of these changes.
+
The objective of this technique is to ensure that [http://www.w3.org/WAI/PF/aria/terms#def_at <code>assistive technology</code>] can gather information about the current active child of a composite widget by setting the [http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant <code>aria-activedescendant</code>] attribute of a relevant element. When standard controls from accessible technologies are used, this process is straightforward. With <code>ARIA</code> composite widgets, on the other hand, authors can relay this information to <code>assistive technology</code> by setting the [http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant <code>aria-activedescendant</code>] attribute. The [http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant <code>aria-activedescendant</code>] 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 [http://www.w3.org/WAI/PF/aria/states_and_properties#aria-owns <code>aria-owns</code>] attribute.
  
The <code>aria-activedescendant</code> 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.  
+
The <code>aria-activedescendant</code> 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.
  
 
== Examples ==
 
== Examples ==

Revision as of 10:54, 1 May 2013


Status

Applicability

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

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. When standard controls from accessible technologies are used, this process is straightforward. With ARIA composite widgets, on the other hand, authors can relay this information to assistive technology by setting the aria-activedescendant attribute. 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.

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.

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>

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

Resources

Related Techniques

Tests

Procedure

  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