WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Autocomplete Dropdown Menus

for

From: David Farough
Date: Aug 5, 2011 2:18PM

I tried both the jquery example and the YUI example.
The Jquery example highlighted the first result in the list and Jaws
did not speak any of the other items in the list as I arrowed to them.

The YUI Sample worked perfectly in versions of Jaws starting from 9.0
through 12.0 inclusively. The Druple 7 example that Everett Zufelt
provided also worked well.

>>> Elle < <EMAIL REMOVED> > 10:02 AM Friday, August 05, 2011 >>>
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