WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible autocomplete / typeahead pattern

for

From: Birkir R. Gunnarsson
Date: Feb 28, 2017 4:00PM

Check the one at www.statefarm.com
I also got the feeling that Bryan has one, or more than one, over on Whatsock.

If you use the HTML5 list attribute you actually get an almost
accessible autocomplete using HTML alone.
<label for="inp1">Search for something</label>
<input type="text" list="suggestions1" id="inp1">
<datalist id="suggestions1">
<option value="suggestion1">
<option value="suggestion2">
...
</datalist>
The only thing that is missing is a live region that notifies a screen
reader user that results are visible.
Something as simple as
<div aria-live="polite" class="sr-only" id="resVisible"></div>
Then JavaScript can dynamically insert messages such as "results are
available" or "results are no longer available" into this div.
Unfortunately this only works in Firefox (49 and above), partialy
works in Chrome but not at all in IE11, so I don't recommend this as
ready to launch yet, but the signs are encouraging.
Cheers
-B
P.s. by "works" I mean that you can use arrow down to navigate to
visible results, through results, you can use escape to dismiss the
list and you can use enter to select a value and move focus back to
input with that value already populated.


On 2/28/17, Joshua Hori < <EMAIL REMOVED> > wrote:
> Harvard also has an example up to consider:
> http://accessibility.huit.harvard.edu/%E2%9C%8E-technique-aria-autocomplete
>
> Joshua
>
>