accessibilityHint
- React Native course
- Expert
- Lesson 27/47
- 5 min
Learn hints with accessibilityHint.
What is accessibilityHint?
accessibilityHint is a hint that explains what happens when the component is tapped. The label says what it is; the hint says what it does. When the user is unsure the hint helps.
Example: <TouchableOpacity accessibilityLabel="Cart" accessibilityHint="Go to the cart">. The screen reader first says "Cart, button", then adds "Go to the cart". The hint is an action sentence: "Go to the cart", "Edit the profile", "Sign out". If the label is enough skip the hint; repeating is noise. The hint should always start with a verb.
How to write a hint
A hint is an action sentence. Keep it short: "Go to the cart" is good; "When you tap this button you will be redirected to the cart page" is bad. The screen reader already reads a lot; do not pad.
The hint starts with a verb: go, do, open, close, edit, share. If the label already holds the action the hint is redundant. For example accessibilityLabel="Sign out" is enough; accessibilityHint="Signs you out of the account" repeats. Use a hint only to clear up ambiguity.
Practice Add a hint to the cart button
Add both accessibilityLabel and accessibilityHint to a TouchableOpacity. The label is "Cart", the hint is "Go to the cart".
Starter code
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function CartButton() {
return (
// add label and hint
<TouchableOpacity onPress={() => {}}>
<Text>Cart</Text>
</TouchableOpacity>
);
}Sample solution
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function CartButton() {
return (
<TouchableOpacity accessibilityLabel="Cart" accessibilityHint="Go to the cart" onPress={() => {}}>
<Text>Cart</Text>
</TouchableOpacity>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match each piece to its role
| Term | Meaning |
|---|---|
accessibilityLabel |
Says what it is |
accessibilityHint |
Says what it does |
accessibilityRole |
Semantic type |
onPress |
Tap action |
2 Go to the cart hint
accessibilityHint=____ onPress={() => {}}>accessibilityHint="Sepete git" onPress={() => {}}>Explanation: The hint is an action sentence.
3 Which hint is well written?
<TouchableOpacity accessibilityHint="?">- "This is a button"
- Cart
- "Go to the cart" Correct answer
- Tap
Explanation: "Go to the cart" is an action sentence.