WebAIM - Web Accessibility In Mind

E-mail List Archives

How to make a Google-style Auto Suggestion Search Field that is automatically accessible

for

From: Bryan Garaventa
Date: Oct 13, 2011 7:18PM

This one's pretty basic, but I thought it might be interesting.

The Auto Suggestion Search Field Module is a Google-style UI component that uses a remote API query to automatically populate suggested items using direct user input, which is automatically accessible to screen reader and keyboard only users.

The demo makes a simple remote search query for a country name. Since a callback is used with delayed processing, there is no freezing up of Assistive Technologies experienced when quickly typing data into the input field.

Also, you'll notice that none of the suggested items are keyboard accessible; this is because they don't need to be. The arrow keys work in the same manner as a combo box.

Instructions:
. Start typing in the "Search for Country" field.
. Using the mouse, click a suggested item to add it to the search field.
. Using the keyboard, use the Up and Down arrow keys to browse suggested items.

Live demo: http://whatsock.com/modules/auto_suggestion_search_field_module/demo.htm
Zip download: http://whatsock.com/modules/auto_suggestion_search_field_module.zip

Known issues:
1. JAWS12 doesn't speak the first matched result automatically using FF.
2. NVDA doesn't speak the first matched result using IE8 nor FF, and doesn't speak the changed result when using the Up and Down arrow keys to navigate suggested items.

Since the module script is simply dynamically changing input.value and triggering input.select() when the arrow keys are used to navigate suggested items, and the ARIA Announce method uses role="status" aria-live="assertive" and aria-relevant="all", I'm inclined to believe that these issues are bugs in each screen reader. From the scripting standpoint, the implementation really couldn't be simpler.
As a side note, it appears that role="status" by itself doesn't work at all in either screen reader.

Best wishes,
Bryan