WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible Autocomplete Dropdown Menus

for

From: Elle
Date: Aug 5, 2011 8:03AM

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