After completing this lesson, you will be able to add the
aria-activedescendant attribute to an autocomplete widget handler to tell adaptive technologies that the child elements have focus.
Time to complete
This lesson introduces autocomplete widgets.
Introduction to autocomplete widgets
An autocomplete widget creates child elements that contain suggestions. You may have encountered an autocomplete widget while filling out a form online or when searching for a document in Google Drive. With Google Drive autocomplete, you start typing a word in the search box, and Google Drive suggests file names that you can choose without having to type in the rest of the word. You can see an example of Google Drive autocomplete below.
Image 2.6.1. Screenshot of autocomplete widget in Google Drive
Accessibility challenges of autocomplete widgets
Autocomplete widgets can be very helpful for sighted users, but they can be problematic for users of adaptive technologies. Without the
aria-activedescendant attribute in your code, a screen reader can't detect (or read aloud) the child elements. Additionally, you want to allow the user to know what those child elements are without losing the focus on the parent element. In this lesson you'll learn how to use the
aria-activedescendant attribute to make a more accessible autocomplete widget.
Note that just adding
aria-activedescendant does not create an accessible autocomplete widget. It is simply one part that makes the autocomplete widget more accessible. More information about building your own autocomplete widget can be found here at the W3C.
Instructions to modify code
aria-activedescendant attribute of the input element
(id=input-destination) to the active element
Edit this code to make it more accessible
Verify the accessibility of your code
Use the Accessibility Developer Tools you downloaded in Lesson 1.1 to verify that your code passes at least five of the Accessibility Audit tests. Select a planet other than the default Mars (Pluto, for example) and click “Audit present state.” The following test should pass.
- ARIA state and property values must be valid
Use ChromeVox to hear how your page has improved as a result of your changes.
Note: Be mindful to remove the
aria-activedescendant attribute when the autocomplete widget is dismissed. Otherwise, the child elements will disappear, which might leave the screen reader in a confused state.