Autocomplete Widgets

Lesson Objective

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

10 minutes

Lesson

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

Screenshot of autocomplete 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

In the setActiveAutocompleteItem JavaScript handler, set the aria-activedescendant attribute of the input element (id=input-destination) to the active element id (acItemElem.id).

Edit this code to make it more accessible

Click here to run the code in a new window.

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.

When you type the letter "P" in the destination box, what are the differences ChromeVox detects between the initial and revised versions of the code?

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.

Resource