Accessibility
Some Sprout users will never see the screen. They hear it through VoiceOver on iPhone or TalkBack on Android, and they move by swiping from one element to the next. A green leaf icon with no label is announced as "button" and nothing else. A few props fix that.
The rule
Every touchable says what it is, what it does, and its state.
React Native passes these props to the platform's screen reader:
<Pressable
onPress={markWatered}
accessibilityRole="button"
accessibilityLabel="Mark fern as watered"
accessibilityHint="Resets the watering countdown"
hitSlop={12}
>
<Image source={require('./assets/drop.png')} style={{ width: 24, height: 24 }} />
</Pressable>
<Switch
value={remind}
onValueChange={setRemind}
accessibilityLabel="Watering reminders"
/>- What it is:
accessibilityRole. Values such as'button','header','link','image','switch'. The screen reader announces it, and users know how to interact. (Newer code may use the shorterroleprop.) - What it does:
accessibilityLabel. The words read aloud. Essential for icons and images. Write the action, not the picture: "Mark fern as watered", not "water drop icon". - Extra help:
accessibilityHint. A short explanation of the result, read after the label. - Its state:
accessibilityState. For example{ disabled: true },{ checked: true }or{ selected: true }. Built-in components likeSwitchreport their own state. - Grouping:
accessible. Settingaccessible={true}on aViewmakes its children read as one element, so a whole plant card can be announced in one go.
Two more habits matter. Make touch targets big enough: about 44 × 44 points on iOS and 48 × 48 on Android. hitSlop helps small icons. And keep enough colour contrast between text and background, since pale green on white is hard to read for many users.
The shortcut
Do the eyes-closed check: turn on VoiceOver or TalkBack, close your eyes, and swipe through the screen. Every element you land on must answer: what is this, and what happens if I tap it?
Swipe to the photo
It reads "image". Decorative only, so group it inside the card instead.
Drills
Answer fast — trust the rule.
An icon-only Pressable is read as just "button". What should you add?
Which label is best for a water-drop icon that marks a plant as watered?
Which prop tells a screen reader that a custom button is currently disabled?
About how large should a touch target be on iOS?
What does accessible={true} on a card's outer View do?
Remember
- Every touchable says what it is, what it does, and its state.
- Eyes-closed check: every stop answers "what is this, what happens if I tap?"
- Trap: labels that describe the picture instead of the action.