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.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Jennison Mark Asuncion
Sent: Wednesday, April 01, 2015 3:38 PM
To: webaim-forum
Subject: [WebAIM] Facebook's Accessibility Toolkit

Facebook just launched the Accessibility Toolkit to provide a behind the scenes look at how they have scaled accessibility. Lots of great information for those looking at how to embed accessibility within engineering teams. https://code.facebook.com/accessibility

Jennison


--
Jennison Mark Asuncion
LinkedIn at www.linkedin.com/in/jennison Follow me on Twitter www.twitter.com/jennison Organizer, Bay Area Accessibility and Inclusive Design www.meetup.com/a11ybay Organizer, Accessibility Camp Bay Area www.accessibilitycampbay.org Co-Founder, Global Accessibility Awareness Day www.globalaccessibilityawarenessday.org