Facebook Accessibility Features

7/30/2020

This post details the technical implementation of accessibility improvements in the redesigned Facebook.com. Key contributions include: integrating accessibility from the foundation of the new site, leveraging React advancements for new tools and techniques, enforcing accessible markup with Flow typing and eslint-plugin-jsx-a11y, implementing scalable font sizes using rems with a build-time transform, ensuring contextual headings with React Context for logical hierarchy, creating a centralized API for contextual keyboard commands using React Context, introducing a runtime analysis tool for markup validation with a visual overlay, developing reusable React components with built-in accessibility based on ARIA Practices, enhancing focus management with dedicated React components for consistent keyboard navigation, and implementing a hook for screen reader announcements using aria-live regions.

9/11/2018

This post introduces Rosetta, a large-scale machine learning system designed to extract and understand text from images and videos across a wide variety of languages. This capability directly enhances accessibility by enabling more relevant photo search and improving screen reader functionality for visually impaired users. It also contributes to community safety by helping to identify inappropriate content. The post details the technical approach, including text detection using Faster R-CNN and text recognition using a CNN with CTC loss, as well as the use of synthetic data generation for training.

3/28/2017

This post introduces the concept of a 'logical grid' and its implementation using ARIA Grid semantics to improve keyboard navigation and non-visual layout support in complex web applications. It addresses the challenge of numerous tab stops by consolidating them into a single tab stop within a grid, allowing for arrow key traversal. The post details the application of this pattern to a to-do list, explains the ARIA Grid roles, and provides a React.js implementation example, highlighting challenges like focus management and gaps in the grid.

10/17/2016

This post details the integration of accessibility property inspection into Stetho, Meta's open-source Android debugging tool. This new feature allows engineers to inspect focusability, ignored reasons, focusable reasons, current focus, accessibility descriptions, and supported actions for UI elements. The post provides a concrete example of a common Android accessibility bug related to focus navigation and demonstrates how Stetho's new capabilities simplify debugging and resolution.

4/5/2016

Introduced automatic alternative (alt) text for photos on Facebook for iOS, providing text descriptions for visually impaired and blind users using object recognition technology. This feature leverages a deep convolutional neural network within Facebook's computer vision platform to detect a curated set of ~100 concepts. The system constructs sentences by categorizing detected elements (people, objects, scenes) and prefacing the description with 'Image may contain' to manage uncertainty. The goal is to provide scalable, algorithmically generated descriptions without user intervention.

11/23/2015

Introduced the React Accessibility API for React Native, allowing developers to make applications accessible to assistive technologies. Demonstrated its use with examples for grouping related UI elements and handling nested interactive components like switches. Showcased how to query and listen for system accessibility status changes to dynamically adjust touch actions and provide context-aware information to screen reader users. Highlighted the Ads Manager app as a practical implementation of these accessibility features.

3/31/2015

This post introduces the Accessibility Toolkit, a centralized resource detailing Facebook's approach to product usability for people with vision loss and varied abilities. It outlines key areas including component library integration for assistive technology compatibility, specific documentation for engineers, quality assurance processes with regression testing, engineer training programs to raise awareness and provide necessary skills, communication channels for user feedback, and fostering an accessible culture within the company.

7/18/2014

This post profiles Larry Schrof, a legally blind Production Engineer at Facebook, detailing his early interest in computers, his journey learning to program despite visual impairments, and his path through education and various tech roles to his current position. It emphasizes his problem-solving mindset in overcoming accessibility challenges, such as developing methods to read programming books and interact with computer screens. The post also touches upon his work in production engineering, specifically supporting the Ads products infrastructure and monitoring systems.

2/3/2014

Introduced PhotoAltTextFetcher, a utility to programmatically generate alt text for user-uploaded images based on metadata (message, owner, tags, location). Developed a mechanism to detect and adapt Facebook.com for high contrast mode by dynamically rendering images inline or as text, and implemented keyboard shortcuts for News Feed navigation.