accessibilityState
- React Native course
- Expert
- Lesson 28/47
- 5 min
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.
Practice Add state to a checkbox
Add accessibilityRole="checkbox" and accessibilityState={{ checked: isChecked }} to a TouchableOpacity. isChecked is a state variable.
Starter code
import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';
function AcceptBox() {
const [isChecked, setIsChecked] = useState(false);
return (
// add role and state
<TouchableOpacity onPress={() => setIsChecked(!isChecked)}>
<Text>Accept</Text>
</TouchableOpacity>
);
}Sample 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.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is given for a disabled button?
<TouchableOpacity accessibilityState={{ ? }}>- disabled: true Correct answer
- busy: false
- selected: false
- checked: true
Explanation: disabled: true reports that it is off.
2 The checked field
accessibilityState={{ ____: isChecked }}accessibilityState={{ checked: isChecked }}Explanation: The checked field carries the tick state.
3 Match each field to its counterpart
| Term | Meaning |
|---|---|
checked |
Ticked |
selected |
Picked |
disabled |
Off |
busy |
Loading |