Facebook Accessibility Features

9 posts · Feb 2014 – Jul 2020

What this trail covers

Meta's commitment to accessibility has evolved to ensure its products are usable by people with disabilities. This includes developing programmatic solutions for generating alt text for images using object recognition technology, improving web content display, and implementing keyboard shortcuts. The development of automatic alt text for photos on Facebook for iOS, leveraging deep convolutional neural networks and a carefully selected set of concepts, represents a significant step towards providing descriptive content for visually impaired users. Enhancements for high contrast mode ensure critical UI elements are visible, and keyboard shortcuts improve navigation for users with motor impairments.

All Meta trails

Jul 2020Making Facebook.com accessible to as many people as possibleThis post details the technical implementation of enhanced accessibility features on the redesigned Facebook.com. Key contributions include: integrating linting with Flow typing and eslint-plugin-jsx-a11y to validate accessible markup and enforce ARIA property provision; implementing scalable font sizes using rems by transforming pixel values during the build process; utilizing React Context for contextual headings to ensure logical heading hierarchy; employing React Context for a centralized API to manage contextual keyboard commands; introducing a runtime analysis tool with a visual overlay to detect and report markup issues; developing reusable React components with built-in accessibility based on ARIA Practices Guide; creating React components for focus management, including FocusList for declarative keyboard navigation; and implementing a `useAccessibilityAlert` hook to generate screen reader announcements via `aria-live` regions.
Sep 2018Rosetta: Understanding text in images and videos with machine learningThis 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.
Mar 2017ARIA Grid: Supporting nonvisual layout and keyboard traversalThis 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.
Oct 2016Android accessibility debugging with StethoThis post details the integration of accessibility property inspection into Stetho, Meta's open-source Android debugging tool. It introduces new panels within Stetho that display whether a View is focusable, the reasons why, its current focus state, its description for accessibility services, and supported AccessibilityActions. The post uses a concrete example of a UI with a focus navigation issue to demonstrate how Stetho's new features help engineers identify and fix accessibility bugs, specifically by making non-actionable TextViews focusable.
Apr 2016Under the hood: Building accessibility tools for the visually impaired on FacebookThis post details the development of automatic alternative (alt) text for photos on Facebook for iOS, utilizing object recognition technology powered by a deep convolutional neural network. It describes the process of selecting approximately 100 prominent and accurately detectable concepts, constructing natural-sounding sentences from detected objects and scenes, and the challenges of balancing information richness with accuracy and social context. The goal is to provide a scalable, automated solution to improve accessibility for visually impaired users.
Advertisement
Nov 2015Making React Native apps accessibleIntroduced 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.
Feb 2014Under The Hood: Facebook AccessibilityThis post details the development of PhotoAltTextFetcher, a programmatic utility to generate alt text for user-uploaded photos and videos based on metadata like owner, tagged people, location, and message content. It also describes enhancements for Facebook.com in high contrast mode, including a JavaScript-based detection mechanism and server-side logic to render images inline or as text alternatives, and the introduction of keyboard shortcuts for News Feed.