45. Accessibility in mobile apps

Accessibility props like `accessible`, `accessibilityLabel` and `accessibilityRole` let screen readers (VoiceOver, TalkBack) describe interactive elements meaningfully — critical for a "Send" button that must never be ambiguous.

import { Pressable, Text } from "react-native";

function SendButton({ onPress }: { onPress: () => void }) {
  return (
    <Pressable
      onPress={onPress}
      accessibilityRole="button"
      accessibilityLabel="Send transaction"
      accessibilityHint="Sends the entered amount to the recipient address"
    >
      <Text>Send</Text>
    </Pressable>
  );
}

Testing with a real screen reader (not just reading the code) catches issues automated checks miss, such as a confusing reading order or a missing label on an icon-only button.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges