Making Facebook.com accessible to as many people as possible

With the new Facebook coming soon to all users, the developers saw an opportunity to build a11y in from the start:

To make the new site more accessible, we were able to introduce guardrails right from the beginning, integrate focus management into the core infrastructure, support features that weren’t available when we built the original site in 2004, and build in monitoring and analysis to help prevent regressions as we continue to add new features.

One of the things I like — and something that’s been often discussed, even way before this Github Issue — is the introduction of a generic Heading component. Leveraging React Context, they then render Contextual Headings.

This snippet for example:

<Heading>
  Main heading
</Heading>
<section>
   <Heading>
     Nested heading
   </Heading>
   Nested content
</section>

Renders this markup:

<h1>Main heading</h1>
<section>
	<h2>Nested heading</h2>
	Nested content
</section>

Making Facebook.com accessible to as many people as possible →