#Accessibility

Accessibility (A11y) refers to the design concept of building accessibility through technical means to ensure that mobile applications can be equally accessed by all kinds of people.

Its core goal is to break down usage barriers, allowing users with different physical conditions, perceptual abilities, and cognitive levels to smoothly obtain information and services.

Mainstream mobile platforms provide a complete accessibility support system: iOS and Android not only natively integrate APIs for users with disabilities but also come equipped with standardized assistive technology toolchains, such as screen readers (VoiceOver / TalkBack) designed specifically for visually impaired users.

On this basis, the Lynx framework encapsulates cross-platform accessibility interfaces, enabling developers to integrate accessibility features in their apps and build an information-accessible mobile ecosystem.

#Default Accessibility Behavior

Only one accessibility element can be successfully accessed and focused by screen readers (VoiceOver on iOS and TalkBack on Android).

However, <text> and <image> are default accessibility elements and can be recognized without any further action.

accessibilitysrc/Default.tsx

Preview

#Tagging Accessibility Elements

Sometimes, you might want to control the size of accessibility elements or aggregate some accessibility information, requiring control over which elements are accessibility nodes.

Use accessibility-element to tag an element as an accessibility element; nested elements are allowed.

In the example below, there will be only one accessibility focus point and it will be read as "Hello world".

accessibilitysrc/Customized.tsx

Preview

#Specifying the Characteristics and Content of Accessibility Elements

Use accessibility-trait to mark the characteristics of an accessibility element, which can be any of image, button, or text.

Use accessibility-label to adjust the content that screen readers will read for an accessibility element.

In the example below, the elements will be read as "Hello lynx" and "I am an image displaying the Lynx icon," respectively.

accessibilitysrc/LabelAndTraits.tsx

Preview

#Adjusting the Reading Order of Accessibility Elements

iOS and Android systems default to arranging accessibility elements from top to bottom and left to right so they can be accessed sequentially by screen readers.

Use accessibility-elements to manually adjust this order. Note that each id should be separated by a comma.

Furthermore, if a parent node sets the accessibility-elements property, only child nodes specified by the accessibility-elements attribute can be accessed, while other child nodes cannot be focused.

In the example below, the order of accessibility elements will be adjusted, and they will be read as "Lynx" and "Hello" sequentially.

accessibilitysrc/ReOrder.tsx

Preview

#Listening to Focus Changes of Accessibility Elements

When the focus of accessibility elements changes, a global event activeElement notifies the information of the newly focused node.

export default class App extends Component<Props, State> {
  componentDidMount() {
    // Listen for focus changes
    this.getJSModule('GlobalEventEmitter').addListener(
      'activeElement',
      this.handleActiveElement,
      this,
    );
  }

  handleActiveElement(info: any) {
    this.setState({
      activeElementJsonStr: JSON.stringify(info),
    });
  }
}

#Actively Focusing on an Accessibility Element

Use requestAccessibilityFocus to provide the capability to actively focus on an accessibility element.

lynx
  .createSelectorQuery()
  .select('#customId')
  .invoke({
    method: 'requestAccessibilityFocus',
    params: {},
    success: function (res) {
      console.log(res);
    },
    fail: function (res) {
      console.log(res);
    },
  })
  .exec();