React Native Accessibility

Accessibility means building apps that everyone can use, including people who are blind, have low vision, hear poorly, or have limited hand movement. Many other people benefit too: someone holding a baby, reading in bright sunlight, or recovering from an injury. Accessible design widens your audience and often improves the experience for all users.

Who Benefits

Need                    Tool the User Relies On
──────────────────────────────────────────────────
Blind or low vision     Screen reader (TalkBack, VoiceOver)
Low vision              Large text, high contrast
Color blindness         Shapes and labels beyond color
Limited dexterity       Large touch targets, voice control
Hearing loss            Captions and visual alerts
Motion sensitivity      Reduced animation

How a Screen Reader Works

A screen reader speaks the label of whatever element has focus. Users swipe to move between elements, and double tap to activate one. The reader announces what an element is and what it does.

Visual screen                     Spoken by screen reader
┌─────────────────────┐
│ [Heart icon]        │  →  "Add to favorites, button"
│ Price: $20          │  →  "Price, 20 dollars"
│ [ Buy now ]         │  →  "Buy now, button"
└─────────────────────┘

The Core Props

accessible

Marks an element as one focus stop. Group related text into a single announcement.

accessibilityLabel

Sets the spoken text. Icons without words need it most.

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Add to favorites"
  accessibilityRole="button"
  onPress={addFavorite}
>
  <Ionicons name="heart" size={28} />
</TouchableOpacity>

accessibilityRole

Tells the reader what the element is: button, link, header, image, checkbox, switch, search, and more.

accessibilityHint

Explains the result of an action when the label alone is unclear.

<Pressable
  accessibilityLabel="Delete note"
  accessibilityHint="Removes this note permanently"
  accessibilityRole="button"
>

accessibilityState

Reports toggles, selections, and disabled status.

<Pressable
  accessibilityRole="checkbox"
  accessibilityState={{ checked: isDone, disabled: false }}
  onPress={toggle}
>
  <Text>{title}</Text>
</Pressable>

Group Related Content

A product card with title, price, and rating reads better as one sentence than as five separate stops.

<View
  accessible={true}
  accessibilityLabel="Blue backpack, 45 dollars, rated 4.5 out of 5"
>
  <Text>Blue backpack</Text>
  <Text>$45</Text>
  <Text>4.5 stars</Text>
</View>

Mark Headings

Headings let screen reader users jump between sections.

<Text accessibilityRole="header" style={{ fontSize: 24 }}>Order Summary</Text>

Announce Changes

Dynamic updates need a spoken notice, since blind users cannot see a banner appear.

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.announceForAccessibility('Item added to cart');

Touch Target Size

Small targets frustrate everyone. Platform guidelines recommend at least 44 points on iOS and 48 points on Android. Extend the touch area without enlarging the visual with hitSlop.

<Pressable hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}>
  <Ionicons name="close" size={20} />
</Pressable>

Color and Contrast

• Meet a contrast ratio of at least 4.5 to 1 for normal text
• Never use color alone to convey meaning, so pair a red error border with an error message
• Test with a color blindness simulator

Respect Text Size and Motion Settings

Users scale text in system settings. Leave allowFontScaling on and build flexible layouts. Check the reduce-motion setting before running animations.

const [reduceMotion, setReduceMotion] = useState(false);

useEffect(() => {
  AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
}, []);

Test with Real Tools

1. Turn on TalkBack on Android or VoiceOver on iOS
2. Navigate the whole app with swipes alone
3. Confirm every control has a clear spoken label
4. Raise the font size to the maximum and review each screen
5. Invite users with disabilities to test, since their feedback beats any checklist

Summary

Accessible apps work for people with diverse abilities. Label icons, set roles and states, group related content, mark headings, and announce changes. Keep targets large, contrast strong, and animations optional. Test with a screen reader before every release.