VoiceOver and TalkBack
- React Native course
- Expert
- Lesson 29/47
- 5 min
Learn the VoiceOver and TalkBack screen readers.
VoiceOver and TalkBack
VoiceOver is the iOS screen reader; TalkBack is the Android one. They read the visual screen aloud. The user slides a finger to navigate; each component is spoken. An accessible app works smoothly with these tools.
To test, turn on VoiceOver from Settings > Accessibility > VoiceOver, or TalkBack from Settings > Accessibility > TalkBack. During development walk each screen at least once with a screen reader. With correct accessibilityLabel, accessibilityRole and accessibilityHint the reading flows. Skipped components or meaningless labels trip the user.
How to test
Screen reader testing has three steps. One: turn on the screen reader. Two: slide your finger across the screen; listen to each component. Three: note missing or wrong labels and fix them. Repeat this loop for every screen.
While roaming check: does every tappable component have a label? Is the label meaningful? Is the role right? Does the state come through? Are icon buttons skipped? If a component says "button" but its purpose is unclear the label is missing. On VoiceOver a two finger swipe up jumps between headings; that is why accessibilityRole="header" matters.
Practice Write an accessible button
Write a TouchableOpacity. Add three accessibility props: accessibilityLabel="Save", accessibilityRole="button", accessibilityHint="Save the changes". Include onPress too.
Starter code
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function SaveButton() {
return (
// add the three accessibility props
<TouchableOpacity onPress={() => {}}>
<Text>Save</Text>
</TouchableOpacity>
);
}Sample solution
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function SaveButton() {
return (
<TouchableOpacity accessibilityLabel="Save" accessibilityRole="button" accessibilityHint="Save the changes" onPress={() => {}}>
<Text>Save</Text>
</TouchableOpacity>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which platform has TalkBack?
Settings > Accessibility > TalkBack- Web
- iOS
- Android Correct answer
- Windows
Explanation: TalkBack is the Android screen reader.
2 Match each tool to its platform
| Term | Meaning |
|---|---|
VoiceOver |
iOS |
TalkBack |
Android |
accessibilityLabel |
Label |
header role |
Heading navigation |
3 iOS screen reader
const reader = '____';const reader = 'VoiceOver';Explanation: VoiceOver is the iOS screen reader.