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.

info

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 discoverable by assistive technologies such as screen readers and hardware keyboards. Note that this does not necessarily mean that the view will be focused by VoiceOver or TalkBack. There are a number of reasons for this, such as VoiceOver disallowing nested accessibility elements, or TalkBack opting to focus some parent element instead.

By default, all touchable elements are accessible.

On Android, accessible will be translated into native focusable. On iOS, it translates into native isAccessibilityElement.

React TSX

<View>
  <View accessible={true} />
  <View />
</View>

In the above example, accessibility focus is only available on the first child view with the accessible property, and not for the parent or sibling without accessible.

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 or TalkBack know what element they have selected. A screen reader will verbalize this string when the associated element is selected.

To use, set the accessibilityLabel property to a custom string on your View, Text, or Touchable:

React TSX

<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:

React TSX

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput
    accessibilityLabel="input"
    accessibilityLabelledBy="formLabel"
  />
</View>

In the above example, the screen reader announces Input, Edit Box for Label for Input Field when focusing on the TextInput.

accessibilityHint

An accessibility hint can be used to provide additional context to the user on the result of the action when it is not clear from the accessibility label alone.

Provide the accessibilityHint property a custom string on your View, Text, or Touchable:

React TSX

<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>

iOS

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

Android

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.

React TSX

<View
  accessible={true}
  accessibilityLabel="Pizza"
  accessibilityLanguage="it-IT">
  <Text>🍕</Text>
</View>

accessibilityIgnoresInvertColors

iOS

Inverting screen colors is an accessibility feature available in iOS and iPadOS for people with color blindness, low vision, or vision impairment. If there's a view you don't want to invert when this setting is on, possibly a photo, set this property to true.

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.

React TSX

<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. When the TouchableWithoutFeedback is triggered, TalkBack reads the text in the Text view because of its accessibilityLiveRegion="polite" property.

accessibilityRole

accessibilityRole communicates the purpose of a component to the user of 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 that can be checked, unchecked, or have a 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 a button or link.
• 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, specifically for interactive elements that open an external URL or web page in a browser. For in-app screen navigation or actions, use button instead.
• 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 that indicates the 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 a text field element should also be treated as a search field.
• spinbutton Used to represent a button that 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 that 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 toolbar (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 Android's GridView.

accessibilityShowsLargeContentViewer

iOS

A boolean value that determines whether the large content viewer is shown when the user performs a long press on the element.

Available in iOS 13.0 and later.

accessibilityLargeContentTitle

iOS

A string that will be used as the title of the large content viewer when it is shown.

Requires accessibilityShowsLargeContentViewer to be set to true.

React TSX

<View
  accessibilityShowsLargeContentViewer={true}
  accessibilityLargeContentTitle="Home Tab">
  <Text>Home</Text>
</View>

accessibilityState

Describes the current state of a component to the assistive technology user.

accessibilityState is an object. It contains the following fields:

Name	Description	Type	Required
disabled	Indicates whether the element is disabled or not.	boolean	No
selected	Indicates whether a selectable element is currently selected or not.	boolean	No
checked	Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.	boolean or 'mixed'	No
busy	Indicates whether an element is currently busy or not.	boolean	No
expanded	Indicates whether an expandable element is currently expanded or collapsed.	boolean	No

To use, set the accessibilityState to an object with a specific definition.

accessibilityValue

Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

accessibilityValue is an object. It contains the following fields:

Name	Description	Type	Required
min	The minimum value of this component's range.	integer	Required if now is set.
max	The maximum value of this component's range.	integer	Required if now is set.
now	The current value of this component's range.	integer	No
text	A textual description of this component's value. Will override min, now, and max if set.	string	No

accessibilityViewIsModal

iOS

A boolean value that indicates whether VoiceOver should ignore the elements within views that are siblings of the receiver.

For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.

accessibilityElementsHidden

iOS

A boolean value indicating whether the given accessibility element, and any accessibility elements it contains, are hidden.

For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the B view and any elements it contains. This is similar to the Android property importantForAccessibility="no-hide-descendants".

aria-valuemax

Represents the maximum value for range-based components, such as sliders and progress bars.

aria-valuemin