React Native
VoiceOver and TalkBack
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.
Exercise Write an accessible button
Write a TouchableOpacity. Add three accessibility props: accessibilityLabel="Save", accessibilityRole="button", accessibilityHint="Save the changes". Include onPress too.
Show example 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>
);
}
Test yourself
-
Which platform has TalkBack?
Settings > Accessibility > TalkBack
Show answer
Android — TalkBack is the Android screen reader.
-
Match each tool to its platform
- VoiceOver
- iOS
- TalkBack
- Android
- accessibilityLabel
- Label
- header role
- Heading navigation
-
iOS screen reader
const reader = '____';
Show answer
const reader = 'VoiceOver';
Next lesson: Summary - Accessibility
