WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bryan Garaventa
Date: Oct 17, 2011 4:03AM

Hi,
Just as an update, it looks like JAWS/NVDA not announcing the ARIA messages in the demo was my fault. Firefox wasn't calling a prototyped function in the same manner as IE, which caused the disconnect to occur. Problem solved! I updated AccDC with the new code, so the same demo now works with JAWS and NVDA using Firefox. I love progress...

----- Original Message -----
From: Vincent Young
To: <EMAIL REMOVED>
Sent: Thursday, October 13, 2011 7:33 PM
Subject: Re: [WebAIM] How to make a Google-style Auto Suggestion Search Field that is automatically accessible


Thanks for the code and good info.


On Thu, Oct 13, 2011 at 6:19 PM, Bryan Garaventa < <EMAIL REMOVED> > wrote:

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