The React Native Accessibility Bugs Every App Ships With (And How to Fix Them)

I've reviewed a lot of React Native codebases in the last year. Every single one shipped with the same six accessibility bugs. Here they are, with fixes.

Quick context: WCAG 2.2 AA is the operative standard for mobile app accessibility in 2026 — the EU's Accessibility Act made it enforceable last year, and ADA lawsuits against mobile apps are climbing. React Native gives you the tools to comply. Most teams just don't use them right.

Bug 1: Icon-only buttons with no label

// Broken

<Pressable onPress={addToCart}>

  <Icon name="plus" />

</Pressable>



// Fixed

<Pressable

  accessibilityRole="button"

  accessibilityLabel="Add to cart"

  accessibilityHint="Adds one to your current cart"

  onPress={addToCart}

>

  <Icon name="plus" />

</Pressable>

VoiceOver reads the first one as "Button." Zero context. Every icon-only tap target needs accessibilityLabel.

Bug 2: FlatList rows read as a wall of text

Each Text child gets read as a separate element. Users swipe 6 times to hear one product tile.

<Pressable

  accessibilityLabel={`${product.name}, ${product.price}, ${product.rating} stars`}

>

  <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants">

    <Text>{product.name}</Text>

    <Text>{product.price}</Text>

    <Text>{product.rating}</Text>

  </View>

</Pressable>

Bug 3: Modal backdrops that don't hide from VoiceOver

pointerEvents="none" stops touch. It does not stop VoiceOver from reading the background content. You need:

<Modal>

  <View accessibilityViewIsModal>

    {/* modal content */}

  </View>

</Modal>

Plus accessibilityElementsHidden={true} on the underlying screen.

Bug 4: Loading spinners that announce silence

Sighted users see the spinner. VoiceOver users hear nothing and assume the app froze.

useEffect(() => {

  if (isLoading) {

    AccessibilityInfo.announceForAccessibility('Loading orders...');

  }

}, [isLoading]);

Bug 5: Custom toggle switches missing accessibilityRole="switch"

The built-in <Switch> handles this. Custom animated switches almost never do:

<Pressable

  accessibilityRole="switch"

  accessibilityState={{ checked: isOn }}

  onPress={() => setIsOn(!isOn)}

>

  <AnimatedThumb on={isOn} />

</Pressable>

Bug 6: Dark mode contrast failures

#888888 on #121212 = 3.5:1. That's under WCAG AA for body text. Dark themes don't get a pass — run every color combination through a contrast checker. Enforce it in your design tokens, not per-component.

Touch targets: WCAG 2.2 SC 2.5.8

Minimum 24×24 CSS pixels. Aim for 44×44 to match iOS and Material guidelines:

<Pressable

  style={{ minWidth: 44, minHeight: 44 }}

  hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}

/>

hitSlop extends the tap area without changing layout — huge for tight icon rows.

The testing stack that actually catches this

Four layers:

1. 
   @react-native-ama/core — runtime overlay in dev builds that flags missing labels, contrast failures, and undersized targets.


2. 
   @testing-library/react-native — getByRole('button', { name: 'Add to cart' }). If the query fails, your a11y is broken.


3. 
   axe DevTools Mobile — automated WCAG audit in CI.


4. 
   Manual VoiceOver + TalkBack — five minutes per release. No tool replaces this.

The angle nobody talks about

Retrofitting accessibility is expensive. Starting with WCAG-aligned defaults is nearly free. That's part of why we built RapidNative — the AI-generated code ships with accessibilityLabel, accessibilityRole, and AA-compliant color tokens by default. You still test with VoiceOver, but you're fixing 5 bugs per screen instead of 50.

WCAG 3.0's editor's draft (Jan 2026) moves to outcome-based scoring, but 2.2 AA is what regulators will hold you to for years. Build the habits now.