skills.rest
oligamiq
oligamiqCOMMUNITY
Explore all skills by this author →
GitHub

mobile-accessibility

Audits React Native, iOS, and Android code for accessibility compliance and screen reader support.

Updated Apr 22, 2024
Search Tags:#accessibility#screen reader#audit#ios#wcag#android#react native
One-click install
npx skills add https://github.com/oligamiq/fast-explorer --skill mobile-accessibility-oligamiq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-accessibility
Source: https://github.com/oligamiq/fast-explorer/tree/main/.agents/skills/mobile-accessibility
Command: npx skills add https://github.com/oligamiq/fast-explorer --skill mobile-accessibility-oligamiq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mobile apps frequently ship with missing accessibility labels, undersized touch targets, and broken screen reader behavior because most accessibility tooling focuses on web. This Skill audits React Native, Expo, iOS (SwiftUI/UIKit), and Android (Compose/Views) code against WCAG 2.2 and platform-specific accessibility APIs. ## Core Features & Use Cases - Cross-platform prop auditing: Checks accessibilityLabel, accessibilityRole, accessibilityHint, accessibilityState, and ARIA prop equivalents in React Native, plus SwiftUI modifiers and Compose semantics. - Touch target and focus validation: Detects touch targets below the 44x44pt (iOS) / 48x48dp (Android) minimums and verifies focus management after navigation or modal presentation. - Structured severity reports: Produces a categorized audit report (Error/Warning/Tip) with file locations, WCAG success criteria mappings, and before/after fix snippets. - Use Case: Before releasing a React Native app, run a full audit to find icon buttons missing accessibilityLabel, FlatList items without position announcements, and images not hidden from TalkBack, then apply the suggested fixes. ## Quick Start Audit this React Native screen for accessibility issues including labels, roles, touch target sizes, and screen reader compatibility, and report all errors and warnings with fixes.

Frequently Asked Questions about mobile-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit React Native accessibility props?▼

Check every interactive element for accessibilityLabel, accessibilityRole, accessibilityHint, and accessibilityState. React Native 0.73+ also supports aria-* prop aliases like aria-label and aria-checked that map to the native equivalents.

What is the minimum touch target size for iOS and Android?▼

iOS requires 44x44 points and Android requires 48x48 density-independent pixels. WCAG 2.5.8 (AA) sets a 24x24 CSS pixel minimum with sufficient spacing, while WCAG 2.5.5 (AAA) targets 44x44.

Does React Native support ARIA attributes like the web?▼

React Native 0.73 and later support aria-* props as aliases, including aria-label, aria-checked, aria-expanded, and aria-live. These map to native props such as accessibilityLabel, accessibilityState, and accessibilityLiveRegion.

How do I test VoiceOver and TalkBack compatibility?▼

On iOS use the Xcode Accessibility Inspector audit and inspection tools, and on Android use Google's Accessibility Scanner app. For automation, React Native Testing Library, Detox, and Maestro can assert on labels and roles.

Can this audit web or HTML accessibility issues?▼

No, it covers only React Native, Expo, iOS, and Android code. Web audits involving HTML and CSS are handed off to a separate web accessibility specialist, as are design token contrast issues.

Related Skills

Explore More Software Engineering Skills→
Yemomo511Yemomo511
2

expo-ui-jetpack-compose

Integrate native Android Jetpack Compose views into Expo applications.

Community
Basic
luanrodriguesluanrodrigues
2

bee:dev-frontend-accessibility-react-native

Validate React Native components for accessibility compliance with VoiceOver and TalkBack.

Community
Advanced
vorynkavitaliyvorynkavitaliy

visual-design-foundations

Standardize typography, color, spacing, and iconography with design tokens.

Community
Advanced
ryan0122ryan0122

mobile-accessibility

Provides React Native, Expo, iOS and Android accessibility reference data and WCAG-mapped fixes.

Community
Intermediate