skills.rest
guicheffer
guichefferCOMMUNITY
Explore all skills by this author →
Website𝕏@guichefferGitHub

rn-accessibility

Implement accessibility labels, roles, and hints for React Native components.

3|Updated Dec 30, 2025
Search Tags:#accessibility#a11y#screen reader#wcag#react native#voiceover#talkback
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill rn-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rn-accessibility
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/ui-design-system-rn/accessibility
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill rn-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures your React Native applications are usable by everyone, including individuals with disabilities, by implementing best practices for screen readers, keyboard navigation, and other assistive technologies.

Core Features & Use Cases

  • Screen Reader Support: Implement accessibilityLabel, accessibilityRole, accessibilityHint, and accessibilityState for all interactive elements, icons, and images.
  • WCAG Compliance: Guide developers to meet WCAG 2.1 AA standards for mobile applications.
  • Use Case: Ensure that a user navigating your app with VoiceOver or TalkBack can understand and interact with all UI elements, including buttons, forms, and dynamic content, just as easily as a sighted user.

Quick Start

Apply accessibility labels and roles to all interactive elements in your React Native components.

Frequently Asked Questions about rn-accessibility

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

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

To make React Native components accessible, apply accessibilityLabel, accessibilityRole, and accessibilityHint properties to interactive elements, images, and icons so VoiceOver and TalkBack can announce them correctly.

What WCAG standards should mobile applications meet for accessibility?▼

Mobile applications should meet WCAG 2.1 AA standards to ensure usability for individuals with disabilities, covering screen reader compatibility, keyboard navigation, and assistive technology support across React Native interfaces.

How do I trap focus inside a modal in React Native?▼

Trap focus inside a React Native modal by implementing focus management techniques that restrict screen reader navigation to the modal's content until explicitly closed.

Can I announce dynamic content changes to VoiceOver and TalkBack users?▼

Announce dynamic content changes to VoiceOver and TalkBack users by utilizing platform-specific accessibility APIs and libraries like @zest/react-native to broadcast updates without requiring direct user interaction.

What is the best way to add altText to React Native images?▼

Add altText to React Native images by setting the accessibilityLabel property on the image component, providing a descriptive text alternative that screen readers can announce when the image is focused.

Related Skills

Explore More Software Engineering Skills→
guichefferguicheffer
3

zest-component-creation-native

Create Zest React Native components with TypeScript and StyleSheet API.

Community
Intermediate
a53alia53ali

accessibility-testing

Test web and mobile applications for WCAG 2.1/2.2 AA conformance using automated tools and manual techniques.

Community
Advanced
MolcajeteAIMolcajeteAI
2

gluestack-ui-setup

Install and configure Gluestack UI for React Native projects.

Official
Intermediate
nahisahonahisaho
12

ui-ux-designer

Create wireframes, mockups, and interactive prototypes with WCAG 2.1 accessibility.

Community
Advanced