E-mail List Archives
Thread: Accessible Autocomplete Dropdown Menus
Number of posts in this thread: 7 (In chronological order)
From: Elle
Date: Fri, Aug 05 2011 8:03AM
Subject: Accessible Autocomplete Dropdown Menus
No previous message | Next message →
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
From: E.J. Zufelt
Date: Fri, Aug 05 2011 8:33AM
Subject: Re: Accessible Autocomplete Dropdown Menus
← Previous message | Next message →
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
>
From: YOUNGV5
Date: Fri, Aug 05 2011 8:39AM
Subject: Re: Accessible Autocomplete Dropdown Menus
← Previous message | Next message →
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 ADDRESS REMOVED =
From:
Elle < = EMAIL ADDRESS REMOVED = >
To:
WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Date:
08/05/2011 10:03 AM
Subject:
[WebAIM] Accessible Autocomplete Dropdown Menus
Sent by:
= EMAIL ADDRESS 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
From: Elle
Date: Fri, Aug 05 2011 8:57AM
Subject: Re: Accessible Autocomplete Dropdown Menus
← Previous message | Next message →
*On Fri, Aug 5, 2011 at 10:32 AM, < = EMAIL ADDRESS REMOVED = > wrote:
*
>
> *Now wondering if it makes sense to progressively enhance that
> drop-down into an unordered list of county links. *
Great add, thank you! Since this is for a senior audience, we definitely
want to abide by progressive enhancement rules.
*On Fri, Aug 5, 2011 at 10:34 AM, E.J. Zufelt < = EMAIL ADDRESS REMOVED = > wrote:
*
>
> *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.*
I will definitely look into the Drupal example, thanks! And, I really like
letting a user know the current state, but just not sure it takes long
enough to announce it out loud. If a user heard "searching" and then
"autocomplete popup" immediately afterwards, would that be confusing?
Thanks,
Elle
From: David Farough
Date: Fri, Aug 05 2011 2:18PM
Subject: Re: Accessible Autocomplete Dropdown Menus
← Previous message | Next message →
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 ADDRESS 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
From: Elle
Date: Fri, Aug 05 2011 2:42PM
Subject: Re: Accessible Autocomplete Dropdown Menus
← Previous message | Next message →
On Fri, Aug 5, 2011 at 4:18 PM, David Farough
< = EMAIL ADDRESS REMOVED = >wrote:
> *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.*
>
>
Wow, David, that's excellent feedback. Thank you very much! We're
currently trying to support JAWS 9 - 12. What browser(s) did you use to
test them?
I appreciate the direction, everyone.
~Elle
From: David Farough
Date: Mon, Aug 22 2011 9:06AM
Subject: Re: Accessible Autocomplete Dropdown Menus
← Previous message | No next message
I used Internet explorer 8.
> 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.*
>
>
David Farough
Application Accessibility Coordinator/coordonateur de l'accessibilité
Information Technology Services Directorate /
Direction des services d'information technologiques
Public Service Commission / Commission de la fonction publique
Email / Courriel: = EMAIL ADDRESS REMOVED =
Tel. / Tél: (613) 992-2779
>
This e-mail message is intended for the named recipient(s) and may
contain information that is privileged, confidential and/or exempt from
disclosure under applicable law. Unauthorized disclosure, copying or
re-transmission is prohibited. If you are not a named recipient or not
authorized by the named recipient(s), or if you have received this
e-mail in error, then please notify the sender immediately and delete
the message and any copies.
>
Ce courriel est destiné exclusivement au destinataire mentionné en titre
et peut contenir de l'information privilégiée, confidentielle ou
soustraite à la communication aux termes des lois applicables. Toute
divulgation non autorisée, toute reproduction ou réacheminement est
interdit. Si vous n'êtes pas le destinataire de ce courriel, ou n'êtes
pas autorisé par le destinataire visé, ou encore, si vous l'avez reçu
par erreur, veuillez le mentionner immédiatement à l'expéditeur et
supprimer le courriel et les copies.