WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Autocomplete Dropdown Menus

for

From: YOUNGV5@nationwide.com
Date: Aug 5, 2011 8:39AM

I'm thinking of the way a standard accessible autocomplete works such as
that from yahoo (link below and video starts at approximately 22:30):

http://developer.yahoo.com/yui/theater/video.php?v=zakas-tsaran

Should the keyboard functionality be the same in your case? That is, when
you start typing into the input the drop-down autocompletes with county
results and you have the ability to down arrown into those results and
select. Now wondering if it makes sense to progressively enhance that
drop-down into an unordered list of county links. I would need to test.
I've been busy as of late; not sure if I can find the time.

Ideas from others welcome.

Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | <EMAIL REMOVED>




From:
Elle < <EMAIL REMOVED> >
To:
WebAIM Discussion List < <EMAIL REMOVED> >
Date:
08/05/2011 10:03 AM
Subject:
[WebAIM] Accessible Autocomplete Dropdown Menus
Sent by:
<EMAIL REMOVED>



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