React Native — Accessibility

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Accessibility

We can add props to our components to make them accessible to assistive technologies.

For example, we can write:

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View accessible={true}>
      <Text>text one</Text>
      <Text>text two</Text>
    </View>
  );
}

We set the accessible prop to true to make the View accessible.

accessbilityLabel

Also, we can add an accessibilityLevel prop to our component to make it accessible.

For example, we can write:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <TouchableOpacity
        accessible={true}
        accessibilityLabel="Tap me!"
        onPress={() => alert('hello world')}>
        <View>
          <Text>Press me!</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to add a TouchableOpacity component that has the accessbilityLabel prop to help screen readers identify the button.

We can also add the accessibilityHint prop to add a hint for the user to understand what the button does.

For example, we can write:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <TouchableOpacity
        accessible={true}
        accessibilityLabel="Tap me!"
        accessibilityHint="Shows alert"
        onPress={() => alert('hello world')}>
        <View>
          <Text>Press me!</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

accessibilityLiveRegion

The accessibilityLiveRegion prop is a prop that’s only available to Android apps.

It’s used to announce changes of the component to the user.

It can have 'none' , 'polite' and 'assertive' as the possible values.

'none' means don’t announce the changes.

'polite' means announce changes to the view.

'assertive' means interrupt ongoing speech to immediately announce changes to this view.

For example, we can write:

import React from 'react';
import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';

export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <View accessible={true} style={styles.container}>
      <TouchableWithoutFeedback onPress={() => setCount(c => c + 1)}>
        <View>
          <Text>Click me</Text>
        </View>
      </TouchableWithoutFeedback>
      <Text accessibilityLiveRegion="polite">
        Clicked {count} times
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to add a Text component with the accessibilityLiveRegion prop to the Text component.

Now the changes to the text of this component will be announced.

accessibilityRole

The accessbilityRole prop lets us communicate what a component is used for to assistive technologies.

The list of possible values are at https://reactnative.dev/docs/accessibility#accessibilityrole.

accessibilityState

The accessibilityState prop describes the current state of a component to the user of assistive technologies.

It’s an object and it can have the disabled , selected , checked , busy , and expanded properties.

disabled indicates whether it’s disabled.

selected indicates whether it’s selected.

checked indicates whether it’s checked.

busy indicates whether it’s busy.

expanded indicates whether it’s expanded.

For instance, we can write:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <Text accessibilityState={{
        disabled: false,
        selected: false,
        checked: false,
        busy: false,
        expanded: false,
      }}>
        hello world
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

to set the values.

Conclusion

We can set the accessibility labels for components with React Native to make our app accessible.