Accessibility
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and TalkBack (Android). React Native has complementary APIs that let your app accommodate all users.
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
Accessibility propertiesβ
accessible
β
When true
, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true}
property for a react-native View will be translated into native focusable={true}
.
<View accessible={true}>
<Text>text one</Text>
<Text>text two</Text>
</View>
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
accessibilityLabel
β
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel
property to a custom string on your View, Text or Touchable:
<TouchableOpacity
accessible={true}
accessibilityLabel="Tap me!"
onPress={onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>
In the above example, the accessibilityLabel
on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
accessibilityLabelledBy
Androidβ
A reference to another element nativeID used to build complex forms.
The value of accessibilityLabelledBy
should match the nativeID
of the related element:
<View>
<Text nativeID="formLabel">Label for Input Field</Text>
<TextInput
accessibilityLabel="input"
accessibilityLabelledBy="formLabel"
/>
</View>
In the above example, the screenreader announces Input, Edit Box for Label for Input Field
when focusing on the TextInput.
accessibilityHint
β
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint
property to a custom string on your View, Text or Touchable:
<TouchableOpacity
accessible={true}
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen"
onPress={onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Back</Text>
</View>
</TouchableOpacity>
In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint
in the iOS Developer Docs
In the above example, TalkBack will read the hint after the label. At this time, hints cannot be turned off on Android.
accessibilityLanguage
iOSβ
By using the accessibilityLanguage
property, the screen reader will understand which language to use while reading the element's label, value and hint. The provided string value must follow the BCP 47 specification.
<View
accessible={true}
accessibilityLabel="Pizza"
accessibilityLanguage="it-IT">
<Text>π</Text>
</View>
accessibilityIgnoresInvertColors
iOSβ
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be true
so that these specific views won't have their colors inverted.
accessibilityLiveRegion
Androidβ
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion
property. It can be set to none
, polite
and assertive
:
- none Accessibility services should not announce changes to this view.
- polite Accessibility services should announce changes to this view.
- assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedback onPress={addOne}>
<View style={styles.embedded}>
<Text>Click me</Text>
</View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
Clicked {count} times
</Text>
In the above example method addOne
changes the state variable count
. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite"
property.
accessibilityRole
β
accessibilityRole
communicates the purpose of a component to the user of an assistive technology.
accessibilityRole
can be one of the following:
- adjustable Used when an element can be "adjusted" (e.g. a slider).
- alert Used when an element contains important text to be presented to the user.
- button Used when the element should be treated as a button.
- checkbox Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
- combobox Used when an element represents a combo box, which allows the user to select among several choices.
- header Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- image Used when the element should be treated as an image. Can be combined with button or link, for example.
- imagebutton Used when the element should be treated as a button and is also an image.
- keyboardkey Used when the element acts as a keyboard key.
- link Used when the element should be treated as a link.
- menu Used when the component is a menu of choices.
- menubar Used when a component is a container of multiple menus.
- menuitem Used to represent an item within a menu.
- none Used when the element has no role.
- progressbar Used to represent a component which indicates progress of a task.
- radio Used to represent a radio button.
- radiogroup Used to represent a group of radio buttons.
- scrollbar Used to represent a scroll bar.
- search Used when the text field element should also be treated as a search field.
- spinbutton Used to represent a button which opens a list of choices.
- summary Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
- switch Used to represent a switch which can be turned on and off.
- tab Used to represent a tab.
- tablist Used to represent a list of tabs.
- text Used when the element should be treated as static text that cannot change.
- timer Used to represent a timer.
- togglebutton Used to represent a toggle button. Should be used with accessibilityState checked to indicate if the button is toggled on or off.
- toolbar Used to represent a tool bar (a container of action buttons or components).
- grid Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to the android GridView.