accessibilityHint

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.

Exercise 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".

Show example 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>
  );
}

Test yourself

Match each piece to its role

accessibilityLabel

Says what it is
accessibilityHint

Says what it does
accessibilityRole

Semantic type
onPress

Tap action

Go to the cart hint

accessibilityHint=____ onPress={() => {}}>

Show answer

accessibilityHint="Sepete git" onPress={() => {}}>

Which hint is well written?
```
<TouchableOpacity accessibilityHint="?">
```
- "This is a button"
- Cart
- "Go to the cart"
- Tap
Show answer

"Go to the cart" — "Go to the cart" is an action sentence.

Next lesson: accessibilityState

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies