• The original link: Making the React Native apps accessible | | Engineering Blog Facebook Code | Facebook
  • The Nuggets translation Project
  • Translator: void – main
  • Proofread by aleen42

With the recent release of the React Framework for the Web and the React Native framework for mobile, we’ve provided developers with a new front-end framework for building applications. A key factor in building a mature product is making sure that everyone can use it, even those with visual impairments or other disabilities. The React and React Native Accessibility apis make your React based applications accessible to users who need assistive tools such as screen readers for blind or visually impaired users.

In this article we will focus on React Native applications. When designing the React accessibility API, we tried to make it similar to the iOS and Android apis. If you’ve ever developed barrier-free apps for the Web, IOS, or Android, you’re probably used to the framework and terminology provided by the React AX API. For example, you can mark a UI element as accessible (thus exposing it to accessibility tools) and use the accessibilityLabel to provide a literal description of the element.

Copy the code

Let’s take a closer look at the React AX API by examining one of Facebook’s own React based products: the Ads Manager APP.

The AD Management app allows Facebook advertisers to manage their accounts and create new ads on the fly. It’s Facebook’s first cross-platform app, and it’s built with React Native.

Advertising can be complicated because there is a lot of contextual information in advertising. When we designed the interaction for accessibility, we decided to combine all of this related information. For example, an activity list item displays the name of the activity leader, the result of the activity, and the status of the activity in an entry (example: “Activity Hacker and Looper, page-post participation, 29,967 people participated, currently active”).

We can easily do this using the React Native barrier-free API. All we need to do is set accessible={true} on the parent component, and the accessibility API collects accessibility tags for all the children.

Hacker and Looper, Page Post Engagement 29,967 Post communicationCopy the code

Nested UI elements, such as switches in list rows, also require specific accessibility support. When the user selects a row in the list using the screen reader, we need to read all the information in that row and tell the user that there are elements in that row that can be manipulated. The accessibility API provides the ability to obtain accessibility from the system and listen for changes in system Settings. Thus, we can simply change the behavior of the parent element to notify the user via a screen reader like VoiceOver or TalkBack (example: “Double-click on this line to change the switch state in the switch”). In the AD management application, we use this switch to toggle notification Settings. When this line is selected, it says, “Allow advertising. Open it. Double click to toggle Settings.

React Native’s accessibility API enables us to query the accessibility status of a system:

AccessibilityInfo.fetch().done((enabled) => {
  this.setState({
    AccessibilityEnabled: enabled,
  });
});
Copy the code

We can also listen for accessibility changes:

componentDidMount: function() { AccessibilityInfo.addEventListener( 'change', this._handleAccessibilityChange ); . }, _handleAccessibilityChange: function(isEnabled: boolean) { this.setState({ AccessibilityEnabled: isEnabled, }); },Copy the code

Through these apis, our product team can control touch events based on the system’s current accessibility Settings. For example, in the screenshot above, there are a number of switches that control push notifications. If the user is using a screen reader, we read out all of the information in that line, including switches and states, for example, “Allow ads, on” — and then the user can switch states by double-clicking on the selected area, for example, double-clicking on this line.

var onSwitchValueChange = this.props.onValueChange;
var onRowPress = null;
if (this.state.isAccessibilityEnabled) {
  onSwitchValueChange = null;
  onRowPress = this.props.onValueChange;
}

var switch = 
return
  
Copy the code

React Native gives you a powerful way to develop apps for iOS and Android, and it also allows you to reuse code efficiently. With the React Native accessibility API, you can ensure that your product is also a polished experience for users with disabilities or assistive tools.

For more information about the React Native AX API, please refer to our development documentation.