accessibility

Enforce VoiceOver and TalkBack accessibility guidelines in Stream Chat React Native apps.

1.2k|377|Updated Mar 28, 2019
One-click install
npx skills add https://github.com/GetStream/stream-chat-react-native --skill accessibility-getstream
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/GetStream/stream-chat-react-native/tree/main/.claude/skills/accessibility
Command: npx skills add https://github.com/GetStream/stream-chat-react-native --skill accessibility-getstream

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a comprehensive checklist and guidelines to maintain high standards of accessibility in the stream-chat-react-native application, ensuring a seamless experience for users with accessibility needs.

Core Features & Use Cases

  • VoiceOver/TalkBack-focused: Specialized in maintaining accessibility for users with screen reader technology.
  • Rule Enforcement: Ensures the use of native semantics and i18n-friendly label keys for all UI elements.
  • Focus and Behavior Management: Includes rules for handling focus behavior and live announcements in apps.
  • Platform Parity: Offers advice on ensuring compatibility with iOS VoiceOver and Android TalkBack.
  • Example Code and Patterns: Provides example code and best practices for common accessibility concerns.
  • Testing Requirements: Includes requirements for testing new keyboard/focus/semantics behavior.
  • Use Cases: Ideal for any developer working on UI components, modals, or list handling that may affect accessibility.

Quick Start

Run the skill to review accessibility guidelines for your components or feature changes.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I implement VoiceOver and TalkBack support in a React Native chat app?

To implement VoiceOver and TalkBack accessibility, you need to enforce native semantics, use i18n-friendly label keys for UI elements, and apply specific focus management rules for mobile screen readers. This ensures a seamless chat experience for users relying on assistive technology.

What are the best practices for focus management in mobile app accessibility?

Best practices for focus management include handling focus behavior during component mounting, managing live announcements for dynamic chat updates, and ensuring proper keyboard navigation. Testing these behaviors across iOS VoiceOver and Android TalkBack ensures platform parity.

How do I ensure my mobile app UI components are i18n-friendly for screen readers?

To make UI components i18n-friendly for screen readers, you must use internationalized label keys instead of hardcoded strings for all accessibility labels. This ensures voice-over and TalkBack announcements are properly localized across different languages.

Does this accessibility skill apply to developers building custom list components and modals?

Yes, this accessibility skill applies directly to developers building custom UI components, modals, or list handling features. It provides example code and enforces native semantics to maintain high accessibility standards in complex chat interface elements.

What testing requirements are needed for new accessibility semantics in mobile apps?

Testing requirements for new accessibility semantics mandate verifying focus, keyboard navigation, and screen reader behavior across iOS and Android. You must validate that voice-over and TalkBack interactions meet platform parity guidelines before deployment.

Why are my screen reader announcements not working properly in my React Native application?

Screen reader announcements fail when UI elements lack proper native semantics or hardcoded labels bypass i18n keys. Enforcing correct accessibility roles, focus management rules, and live region announcements resolves these voice-over and TalkBack compatibility issues.