Basic accessibility — VoiceOver/TalkBack labels, Dynamic Type, sufficient contrast

Apple has tightened accessibility enforcement since iOS 17, and WCAG 2.2 SC 1.1.1 (non-text content) and SC 1.4.4 (resize text) apply to mobile apps under Section 508 §502.3.1 for any app serving government contracts or enterprise clients. allowFontScaling={false} is the single most common AI-generated accessibility anti-pattern: the AI produces it to prevent layout overflow, but it globally disables iOS Dynamic Type, making the app unusable for the 20% of iOS users who increase their system font size. VoiceOver users with zero accessibilityLabel props encounter an app where the screen reader reads raw component type names — 'button', 'button', 'image' — with no navigable context.

Add accessibilityLabel to every tappable element and replace all allowFontScaling={false} instances:

// Before — screen reader reads "button"
<TouchableOpacity onPress={openSettings}>
  <Image source={icons.gear} allowFontScaling={false} />
</TouchableOpacity>

// After — screen reader reads "Open settings"
<TouchableOpacity
  onPress={openSettings}
  accessibilityLabel="Open settings"
  accessibilityRole="button"
>
  <Image source={icons.gear} />
</TouchableOpacity>

To find all allowFontScaling={false} instances: grep -r 'allowFontScaling={false}' src/. Remove them all — if a layout breaks with large fonts, fix the layout with flexWrap or numberOfLines instead of disabling scaling.

• ID: accessibility

• Severity: medium

• What to look for: Examine interactive and content UI elements for accessibility implementation: (1) VoiceOver/TalkBack labels — In React Native, search for accessibilityLabel, accessibilityHint, and accessibilityRole props on TouchableOpacity, Pressable, Button, Image, and TextInput components. A pass requires that all tappable elements and images have meaningful accessibilityLabel props — not just the tappable root element, but also image-only buttons where the label is the only source of context. In Flutter, check Semantics widgets around tappable elements and images. In Swift/SwiftUI, check .accessibilityLabel() and .accessibilityHint() modifiers. In Kotlin Compose, check semantics { contentDescription = "..." } blocks. (2) Dynamic Type / Font Scaling — In React Native, search for hardcoded fontSize values not using PixelRatio.getFontScale() or system font size preferences. Also check if allowFontScaling={false} appears on any Text components — this disables Dynamic Type and is a common AI-generated pattern. In Flutter, check if textScaleFactor is hardcoded to 1.0. (3) Color contrast — Look for hardcoded color combinations that may fail WCAG 2.1 AA contrast (4.5:1 for normal text, 3:1 for large text). Flag: light gray text on white backgrounds (color: '#999' on backgroundColor: '#fff'), white text on light-colored backgrounds. Count the number of allowFontScaling={false} instances as a severity signal.

• Pass criteria: All tappable elements and images have meaningful accessibilityLabel props. No allowFontScaling={false} on user-visible Text components. No obviously failing color contrast combinations. At least 70% of tappable elements have explicit accessibility labels.

• Fail criteria: Zero accessibility labels on interactive elements (total absence); allowFontScaling={false} on the majority of Text components; clearly failing contrast ratios throughout the app (e.g., #999 on #fff for body text).

• Skip (N/A) when: Never — basic accessibility applies to all apps.

• Detail on fail: "No accessibilityLabel props found on any TouchableOpacity or Pressable components across 12 screens — VoiceOver users cannot navigate the app" or "allowFontScaling={false} found on 23 Text components — Dynamic Type is disabled throughout the app"

• Remediation: Apple has become increasingly strict about accessibility since iOS 17, and Google Play requires accessibility compliance for certain Play Store badges and corporate procurement.

  1. Add accessibilityLabel to every TouchableOpacity, Pressable, and image-only button: <TouchableOpacity accessibilityLabel="Open settings menu">
  2. Remove all allowFontScaling={false} props — let the OS control font scaling
  3. For color contrast, use the Accessibility Inspector (Xcode) or Android Accessibility Scanner to identify failing combinations
  4. For icons used as buttons, add accessibilityRole="button" to clarify the element's purpose to screen reader users

  Review the configuration in src/ or app/ directory for implementation patterns.