React Native
accessibilityState
Learn state with accessibilityState.
What is accessibilityState?
accessibilityState tells the screen reader the current state of a component. It carries boolean fields like selected, checked, disabled, busy. Without hearing the state the user cannot use the component.
Example: for a checkbox accessibilityState={{ checked: true }}. The screen reader says "checked". With disabled: true it adds "disabled". These fields must mirror the visual state; visual and spoken must match. If you do not update the state the user hears wrong info. That is why the state is refreshed on every change.
Exercise Add state to a checkbox
Add accessibilityRole="checkbox" and accessibilityState={{ checked: isChecked }} to a TouchableOpacity. isChecked is a state variable.
Show example solution
import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
function AcceptBox() {
const [isChecked, setIsChecked] = useState(false);
return (
<TouchableOpacity accessibilityRole="checkbox" accessibilityState={{ checked: isChecked }} onPress={() => setIsChecked(!isChecked)}>
<Text>Accept</Text>
</TouchableOpacity>
);
}
State fields
Common state fields: checked (is the checkbox ticked), selected (is the tab picked), disabled (is it off), busy (is it loading). Each is boolean; true/false.
Example: for a tab accessibilityState={{ selected: true }}. The screen reader says "selected". If a button is loading you set busy: true; the user hears "busy" and does not tap again. Several fields can be given at once: { selected: true, disabled: false }. Only set fields that are true-ish; each adds info to the screen reader.
Test yourself
-
What is given for a disabled button?
<TouchableOpacity accessibilityState={{ ? }}>
- disabled: true
- busy: false
- selected: false
- checked: true
Show answer
disabled: true — disabled: true reports that it is off.
-
The checked field
accessibilityState={{ ____: isChecked }}
Show answer
accessibilityState={{ checked: isChecked }}
-
Match each field to its counterpart
- checked
- Ticked
- selected
- Picked
- disabled
- Off
- busy
- Loading
Next lesson: VoiceOver and TalkBack
