skills.rest
ryan0122
ryan0122COMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-accessibility

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

Updated Jan 29, 2025
Search Tags:#accessibility#a11y#mobile#ios#wcag#android#react native
One-click install
npx skills add https://github.com/ryan0122/a11ypros --skill mobile-accessibility-ryan0122
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-accessibility
Source: https://github.com/ryan0122/a11ypros/tree/main/.github/skills/mobile-accessibility
Command: npx skills add https://github.com/ryan0122/a11ypros --skill mobile-accessibility-ryan0122

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the critical need for mobile application accessibility, ensuring that applications are usable by people with disabilities. It provides comprehensive guidance and reference data to identify and fix common accessibility issues on mobile platforms.

Core Features & Use Cases

  • Platform-Specific Guidance: Offers detailed information for React Native, Expo, iOS, and Android.
  • WCAG Compliance: Maps accessibility properties to Web Content Accessibility Guidelines (WCAG) success criteria.
  • Code Examples: Provides clear violation patterns and fixes for common issues like missing labels, incorrect roles, and inadequate touch targets.
  • Testing Tools: Includes commands and configurations for essential accessibility testing tools like Xcode Accessibility Inspector, Android Accessibility Scanner, and Maestro.
  • Use Case: A developer is building a new feature in a React Native app and needs to ensure all interactive elements are properly accessible to screen readers. They can consult this Skill for the correct accessibilityLabel, accessibilityRole, and touch target size recommendations.

Quick Start

Use the mobile-accessibility skill to review the accessibility properties for a React Native button component.

Frequently Asked Questions about mobile-accessibility

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

FAQPage Schema
How do I make my React Native app accessible to screen readers?▼

To make a React Native app accessible, use properties like `accessibilityLabel` and `accessibilityRole` on interactive elements. This ensures screen readers properly announce component purposes and interactions to users with visual impairments.

What are the WCAG requirements for mobile touch target sizes?▼

WCAG success criteria require mobile interactive elements to maintain adequate touch target sizes to ensure usability. Applying these accessibility properties prevents common violation patterns where buttons or links are too small to tap accurately.

Can I use Xcode Accessibility Inspector for testing React Native iOS apps?▼

You can use Xcode Accessibility Inspector to test React Native iOS apps by scanning views for missing labels or incorrect roles. This testing tool identifies mobile application accessibility issues mapped to WCAG success criteria.

What is the best way to fix missing accessibility labels on Android and iOS?▼

The best way to fix missing accessibility labels is to apply platform-specific properties like `accessibilityLabel` in React Native or content descriptions in Android. This addresses common violation patterns by mapping elements to appropriate WCAG criteria.

Does Expo support all the accessibility properties recommended for mobile apps?▼

Expo supports essential accessibility properties for mobile apps, allowing you to configure roles and labels for interactive elements. It provides detailed guidance ensuring features are properly accessible across iOS and Android platforms.

Why does Android Accessibility Scanner report violations on my custom components?▼

Android Accessibility Scanner reports violations on custom components when they lack adequate touch target sizes or missing accessibility roles. Mapping elements to WCAG success criteria helps identify and resolve common interactive accessibility issues.

Related Skills

Explore More Software Engineering Skills→
josephblaisjosephblais

mobile-accessibility

Provide accessibility reference data for React Native, iOS, and Android auditing.

Community
Intermediate
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
himanshu231204himanshu231204
2

accessibility

Audit UI code for WCAG 2.2 AA compliance and generate accessibility attributes.

Community
Intermediate