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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.