React Native Accessibility

React Native Accessibility

Scan, fix, and audit accessibility in React Native and Expo projects. Detects missing screen reader labels, roles, hints, font scaling issues, WCAG violations, and generates Jest test code. Supports both iOS (VoiceOver) and Android (TalkBack) with platform-specific considerations per rule.

When to Apply

Reference these guidelines when:

• Working on React Native or Expo projects that need accessibility support
• Adding VoiceOver (iOS) or TalkBack (Android) support
• Running an accessibility audit or a11y review
• Fixing font scaling, contrast, or WCAG compliance issues
• Preparing a mobile app for accessibility compliance

Rule Categories by Priority

| Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Missing Screen Reader Labels | CRITICAL | p0- | | 2 | Missing Context and Discoverability | HIGH | p1- | | 3 | Visual, Interaction, and System Setting Compliance | MEDIUM | p2- |

Quick Reference

1. Missing Screen Reader Labels (CRITICAL)

• p0-images-without-labels — Images, ExpoImage, and SVG icons without accessibilityLabel
• p0-icon-only-pressables — Pressable/TouchableOpacity wrapping only an icon with no label

2. Missing Context and Discoverability (HIGH)

• p1-missing-hints — Interactive elements without accessibilityHint
• p1-missing-roles — Pressable/Touchable without accessibilityRole
• p1-missing-input-labels — TextInput without accessibilityLabel
• p1-small-touch-targets — Interactive elements below 48x48 dp minimum
• p1-color-only-information — Color as the sole means of conveying information

3. Visual, Interaction, and System Setting Compliance (MEDIUM)

• p2-font-scaling-disabled — allowFontScaling={false} or low maxFontSizeMultiplier
• p2-ungrouped-elements — Related elements (icon + text) not grouped for screen readers
• p2-missing-header-roles — Section titles without accessibilityRole="header"
• p2-decorative-elements-exposed — Decorative images/separators in the accessibility tree
• p2-contrast-insufficient — Colors that fail WCAG AA contrast ratios
• p2-reduce-motion-ignored — Animations without reduce-motion check
• p2-custom-actions-missing — Swipe/long-press gestures without accessibilityActions
• p2-live-region-missing — Dynamic content updates not announced to screen readers
• p2-modal-focus-management — Custom modals without focus trapping or background hiding

WCAG AA Coverage

| WCAG Criterion | Rules Covering It | |---------------|-------------------| | 1.1.1 Non-text Content | p0-images-without-labels, p0-icon-only-pressables, p2-decorative-elements-exposed | | 1.3.1 Info and Relationships | p2-ungrouped-elements, p2-missing-header-roles | | 1.4.1 Use of Color | p1-color-only-information | | 1.4.3 Contrast (Minimum) | p2-contrast-insufficient | | 1.4.4 Resize Text | p2-font-scaling-disabled | | 2.5.5 Target Size | p1-small-touch-targets | | 4.1.2 Name, Role, Value | p1-missing-roles, p1-missing-hints, p1-missing-input-labels | | 4.1.3 Status Messages | p2-live-region-missing |

Workflow

Execute these 5 phases in order. Load rule files on-demand — only read a rule when its content is needed for the current phase.

Phase 1: Project Discovery

1. Check for app.json or app.config.js/app.config.ts to determine if this is an Expo project
2. Glob for **/*.{tsx,jsx,ts,js} to find all React Native source files
3. Identify navigation library: @react-navigation/*, expo-router, etc.
4. Grep for existing accessibility usage to understand current coverage:

• accessibilityLabel, accessibilityHint, accessibilityRole
• accessibilityState, accessibilityValue, accessibilityActions
• accessibilityLiveRegion, accessibilityViewIsModal
• accessible={false}, importantForAccessibility

1. Report: total files, Expo vs bare RN, navigation library, current accessibility coverage percentage

Phase 2: Issue Detection

Scan files for anti-patterns. Read rules from rules/ directory for detection patterns.

For each issue found, record: file path, line number, priority, description, and suggested fix.

Phase 3: Automated Fixes

Apply fixes using Edit tool, following these rules:

1. Never overwrite existing accessibility code — only add missing properties
2. Add [VERIFY] comment markers on generated labels where semantic accuracy needs human review:

``tsx accessibilityLabel="Settings icon" // [VERIFY] confirm label matches intent ``

1. Preserve formatting — match the indentation and style of surrounding code
2. Group related fixes — apply all fixes to a single element together

Fix application order:

1. P0 Critical fixes first
2. P1 High fixes
3. P2 Medium fixes (comprehensive mode only)

Phase 4: Test Generation

Load assets/jest-a11y-test-template.tsx and generate a Jest test file for the project.

1. Create accessibility.test.tsx in the project's test directory
2. Add a test case for each screen/component that was modified
3. Use @testing-library/react-native with accessibility queries
4. Include setup for navigation context if needed

Match the project's existing test framework and patterns.

Phase 5: Report

Output a structured summary:

## Accessibility Audit Report

### Issues Found
| Priority | Category | Count |
|----------|----------|-------|
| P0 Critical | ... | ... |
| P1 High | ... | ... |
| P2 Medium | ... | ... |

### Changes Applied
- **Files modified**: [list]
- **Issues fixed**: [count] of [total]
- **Test file generated**: [path]

### Platform Coverage
| Feature | iOS (VoiceOver) | Android (TalkBack) |
|---------|-----------------|-------------------|
| Screen reader labels | Ready / Needs Work | Ready / Needs Work |
| Roles and hints | Ready / Needs Work | Ready / Needs Work |
| Touch targets | Ready / Needs Work | Ready / Needs Work |
| Font scaling | Ready / Needs Work | Ready / Needs Work |
| Reduce motion | Ready / Needs Work | Ready / Needs Work |

### Manual Review Required
Items marked with [VERIFY] that need human confirmation:
- [list of VERIFY items with file:line references]

### Next Steps
- [ ] Run VoiceOver testing on iOS (see assets/checklist.md)
- [ ] Run TalkBack testing on Android (see assets/checklist.md)
- [ ] Review [VERIFY] markers and update labels
- [ ] Run generated accessibility tests
- [ ] Test with maximum system font size on both platforms
- [ ] Test with Reduce Motion enabled on both platforms
- [ ] Verify color contrast with a contrast checker tool

Configuration

• Standard mode (default): Fixes P0 and P1 issues, reports P2
• Comprehensive mode: Fixes all priority levels — invoke with "comprehensive" or "full audit"

Supporting Files

Loaded on-demand during execution:

• rules/ — Individual detection and fix rules per issue category (16 rules)
• references/react-native-a11y-api.md — Full React Native accessibility API catalog
• references/platform-differences.md — iOS vs Android accessibility behavior differences
• references/wcag-guidelines.md — WCAG AA and platform guideline reference
• assets/jest-a11y-test-template.tsx — Jest accessibility test template
• assets/checklist.md — Manual verification checklist for both platforms

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: madebyecho
• Source: madebyecho/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.