WebAIM - Web Accessibility In Mind

E-mail List Archives

Reg typeahead/autocomplete accessibility.

for

From: Ramya Sethuraman
Date: Aug 9, 2012 10:42AM

Hi,

I am trying to figure out the best way to make a typeahead/autocomplete
feature in a search field accessible while also making it usable with
screen readers and what I mean by this is, it is possible to set aria tags
to make the screen reader announce every single option in the typeahead but
this makes the feature not very usable and I want to reach a good balance
between the two. So, I have a search field, when the user types a letter, a
list pops up with suggestions with the first suggestion auto selected. If
the user presses enter, he automatically selects the first item in the
typeahead. Or he can use his arrow keys to move up/down the dropdown list.
All the while focus remains on the search field so he can ignore the
autosuggestion and just keep typing. How can I make this accessible?

1. Since focus remains in the search field at all times, I would have to
use aria alert to let the screen reader know that the first suggestion is
auto selected and he should press enter to select it. Should I set the
search field role to combobox so the screen reader user knows he can use
the up/down arrow keys to navigate?

2. If he continues typing, the autocomplete popup changes but is there a
reason to let the screen reader know about this? I still have the alert on
the first selected autocomplete item. Is this sufficient?

Thanks,

Ramya

--
*I also exist @: http://www.ramyasethuraman.com*