Facebook outfits React with Accessibility API

A new API extends React and React Native to people needing assistive technology

Facebook outfits React with Accessibility API
Jeremy Keith (Creative Commons BY or BY-SA)

Facebook is fitting its React JavaScript library and the accompanying React Native mobile framework with an API to accommodate application usage by disabled persons.

Emphasizing the goal of enabling anyone to use apps built with its React technologies, Facebook engineers have created the Accessibility API for React and React Native. With it, React-powered experiences can be used by someone who may work with assistive technology, such as a screen reader for the blind and visually impaired.

"We've designed the React Accessibility API to look and feel similar to the iOS and Android APIs," said Facebook software engineers Georgiy Kassabli and Chace Liang in a blog post on Monday. "If you've developed accessible applications for the Web, iOS, or Android before, you should feel comfortable with the framework and nomenclature of the React AX API."

Developers could make a UI element accessible to assistive technology. The engineers also cited an example involving the Facebook Ads Manager app, which allows advertisers to manage accounts or create new ads, which can have a lot of contextual information. "When we were designing these interactions for accessibility, we decided to group related information together. For example, a campaign list item displays the campaigner's name, campaign result, and campaign status in one single list item," said the engineers. "We can implement this behavior with React Native's Accessibility API easily. We just need to set accessible={true} on the parent component, and it will then gather all accessibility labels from its children."

In conjunction with the Accessiblity API, Facebook also is offering "accessibility primer" HIKE, which can be used by developers familiar with HTML, CSS, and JavaScript. "H" stands for headings and semantic content, "I" for images and non-context content, "K" for keyboard navigation, and "E" for "a little extra love to build custom components and to address issues of color contrast and text size," according to a blog post by Ramya Sethuraman, a member of the Facebook accessibility team. "The primer teaches some essentials of Web accessibility through simple exercises," she said.