WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Autocomplete Dropdown Menus

for

From: E.J. Zufelt
Date: Aug 5, 2011 8:33AM

You can take a look at the Drupal 7 autocomplete. It isn't perfect, but it gets the job done. There is a public example at http://certifiedtorock.com/

You can try searching for anyone registered on Drupal.org, you can try using "Everett Zufelt"

A screen-reader should announce "Searching" when the search begins, and "Autocomplete popup" when the select list appears.


Everett Zufelt
http://zufelt.ca

Follow me on Twitter
http://twitter.com/ezufelt

View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt



On 2011-08-05, at 10:02 AM, Elle wrote:

> We're looking to develop a ZIP code entry form with an autocomplete dropdown
> feature that populates the counties in that ZIP code. When selected, the
> county will refine the user's results on the next page. If ignored, a user
> will be prompted to choose a county on the next screen before the results
> page, so I think the error recovery issues are minimal.
>
> I just started researching, and I came across this jQuery example:
> http://www.pengoworks.com/workshop/jquery/autocomplete.htm and YUI:
> http://developer.yahoo.com/yui/examples/autocomplete/ac_accessible.html but
> I haven't done any testing yet. I've also been looking for ARIA examples
> here: http://test.cita.illinois.edu/aria/index.php.
>
> As far as I understand it, here are the areas I need to focus on to ensure
> accessibility when testing:
>
> - when a user begins to type in a ZIP code, he/she is prompted that a
> select list has populated below the ZIP code entry with county choices
> - all functions are keyboard accessible and tab order/focus path is
> logical and intuitive
> - when a county is selected from the dropdown choices, a user should be
> able to select Enter and submit the form
> - county choices also resize when a user resizes text on the web page
> (200%)
> - color contrast (4.5:1 or higher) for all components
>
> So, does anyone have recommendations on the best, most accessible
> implementation of an autocomplete feature for a dropdown menu? And, can
> someone please let me know if I'm off base or if I have missed any critical
> item to test for accessibility?
>
> Much appreciated,
> Elle
>