accessibilityLabel
- React Native course
- Expert
- Lesson 25/47
- 5 min
Learn accessible labels with accessibilityLabel.
What is accessibilityLabel?
accessibilityLabel is the label that describes a component for a screen reader. When a low vision user turns on VoiceOver or TalkBack they hear this label. If the button's visible text is not enough or the button is icon only, the label says what it does.
Example: <TouchableOpacity accessibilityLabel="Back">. Here the button's label is "Back"; the screen reader reads it aloud. Keep labels short and meaningful; not long sentences. Always set one on icon buttons; on text buttons the text may be enough. This prop works on both iOS and Android.
Short and meaningful labels
Labels should be short and direct. accessibilityLabel="Back" is good; accessibilityLabel="When you tap this you will go back to the previous screen" is bad. The screen reader already says "button"; do not repeat it.
Use action verbs for labels: "Add to cart", "Share", "Close". If several components share a label add position: "Top menu", "Bottom menu". A label is not HTML; it is read as plain text. That is why it does not contain <Text> tags.
Practice Add a label to an icon button
Add an accessibilityLabel to a TouchableOpacity. It shows an icon inside. The label is "Settings".
Starter code
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function SettingsButton() {
return (
// add accessibilityLabel
<TouchableOpacity onPress={() => {}}>
<Text>?</Text>
</TouchableOpacity>
);
}Sample solution
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function SettingsButton() {
return (
<TouchableOpacity accessibilityLabel="Settings" onPress={() => {}}>
<Text>?</Text>
</TouchableOpacity>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When should accessibilityLabel be set?
<TouchableOpacity accessibilityLabel="Geri">- On icon buttons Correct answer
- Only on iOS
- Only on text buttons
- Never
Explanation: Icon buttons have no visible text; the label is mandatory.
2 Back button label
<TouchableOpacity ____="Geri" onPress={goBack}><TouchableOpacity accessibilityLabel="Geri" onPress={goBack}>Explanation: accessibilityLabel sets the label for the screen reader.
3 Match each piece to its role
| Term | Meaning |
|---|---|
accessibilityLabel |
Screen reader label |
TouchableOpacity |
Touchable component |
onPress |
Tap action |
goBack |
Back navigation |