WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Facebook's Accessibility Toolkit

for

Number of posts in this thread: 2 (In chronological order)

From: Jennison Mark Asuncion
Date: Wed, Apr 01 2015 4:37PM
Subject: Facebook's Accessibility Toolkit
No previous message | Next message →

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

From: Bryan Garaventa
Date: Wed, Apr 01 2015 8:40PM
Subject: Re: Facebook's Accessibility Toolkit
← Previous message | No next message

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 ADDRESS 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