WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Facebook's Accessibility Toolkit

for

From: Bryan Garaventa
Date: Apr 1, 2015 8:40PM

Hi,
I was reading through the Component Library section, and noticed the following.

Within the Typeaheads section, it states:

We often use dynamic typeaheads for selecting people and key information from a list. The core typeahead component has relevant ARIA attributes for screen readers. The typeahead also supports navigation by arrow keys, and closing the list places focus back in the input field. The input text field looks something like this:
<input type="text" aria-expanded="false" aria-autocomplete="true" aria-owns="typeahead_list" role="textbox"...>
...
<ul id="typeahead_list" role="listbox"...>
<li role="option"...>
...
</ul>

The role of 'textbox' and the value of aria-autocomplete are incorrect.

For this to work correctly, it requires full ARIA Combobox markup in order to tie it into the Accessibility API on the OS, using the role of 'combobox', and the correct aria-autocomplete value.

E.G

<input role="combobox" type="text" aria-expanded="false" aria-autocomplete="none" aria-owns="typeahead_list" ...>

Reference:
http://www.w3.org/TR/wai-aria/roles#combobox
and
http://www.w3.org/TR/wai-aria/states_and_properties#aria-autocomplete

It's also a good practice to use unobtrusive announcement to announce the first suggested item when the list is rendered.