Component Library

When the accessibility team started, we had two main challenges:

  • How do we make 20+ products built by hundreds of engineers across multiple platforms accessible?
  • How do we make sure accessibility improvements last, even as products change?

We started by focusing on something really critical to how Facebook scales development: the component library. Our component library (which includes buttons, menus, dialogs, etc for web, iOS and Android) is built and maintained by a team of engineers known as Product Infra. Product teams like Timeline, News Feed and Groups all use components from this library. We collaborated with Product Infra to make sure Facebook's core components included basic accessibility support. For example:

Dialogs

Facebook relies on dialogs to avoid full page refreshes and to simplify our UI. To make dialogs more accessible, we manage keyboard focus within the dialog and add appropriate roles and labels so screen readers can announce when dialogs load and people can immediately interact with them.

Image of Create New Event
<div role="dialog" aria-labelledby="dialog_title"...>
  <h3 id="dialog_title"...>Dialog Title</h3>
  ...
</div>

Typeaheads

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:

Image of School/University typeahead
<input type="text" aria-expanded="false" aria-autocomplete="true" aria-owns="typeahead_list" role=“combobox" aria-activedescendant="ja_1"...>
    ...
    <ul id="typeahead_list" role="listbox"...>
    <li role="option" id="ja_1"...>
    ...
    </ul>

Menus

Our core menu component can be opened with the “Enter" key. You can navigate results using arrow keys and close the menu with the “Esc” key. Our core menu has relevant ARIA roles and states. We also maintain tabindex for the menu items so that the selected menu item has a tab index of 0 while the remaining menu items have a tabindex of -1.

Image of Timeline feed story menu
<ul role="menu"...>
    <li role="presentation"..>
    <a role="menuitem" tabindex="0"...>
    ...
    </a>
    </li>
    <li role="presentation"..>
    <a role="menuitem" tabindex="-1"...>
    ...
    </a>
    </li>
    
    ...
    </ul>  

By incorporating accessibility into these components, product teams get (some) accessibility for free. That said, a great UI is not just a collection of components. You always need to do more work to make the whole experience accessible. But starting with core components creates a foundation for us to build on.

Facebook has an internal tool called the Component Explorer, which lets engineers browse for what they need. Since not all accessibility considerations can be incorporated into a component, we added sections to the ones that need a bit more work to get right. For example, we included extra context on checkbox inputs to make sure related headings are read back.

Keep Updated

Stay up-to-date via RSS with the latest open source project releases from Facebook, news from our Engineering teams, and upcoming events.

Subscribe
Facebook © 2017