DEV Community

Cover image for The React Native Accessibility Bugs Every App Ships With (And How to Fix Them)
Hugo Rus
Hugo Rus

Posted on • Originally published at rapidnative.com

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

#reactnative #a11y #mobile #webdev

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 }}
/>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)