accessibility

Implements VoiceOver-friendly labels and roles for RN and Liquid Glass apps.

Updated Jan 29, 2026
One-click install
npx skills add https://github.com/takapom/trip-app --skill accessibility-takapom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/takapom/trip-app/tree/main/.claude/skills/accessibility
Command: npx skills add https://github.com/takapom/trip-app --skill accessibility-takapom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

iPhoneのVoiceOverを中心に、視覚障害を持つユーザーがアプリを快適に操作できるようアクセシビリティ対応を実装します。

Core Features & Use Cases

  • Liquid Glassデザインを前提としたVoiceOver対応のUI適合
  • 透明度とコントラスト・読み上げ順の改善
  • コンポーネントごとの適切なrole、label、hintの付与と順序調整
  • 画面ごとのアクセシビリティ監査と修正パターンのまとめ

Quick Start

Audit your app screens and implement VoiceOver-friendly accessibility attributes across components.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I add VoiceOver accessibility labels to React Native components?

Screen reader accessibility in React Native is improved by assigning accessibilityLabel, accessibilityRole, and accessibilityHint to components. This enforces proper reading order and provides clear context for buttons, toggles, and images.

What is the best way to audit iPhone app screens for screen reader accessibility?

Auditing iPhone screen reader accessibility involves reviewing each screen for missing accessibleRole, accessibilityLabel, and accessibilityHint attributes. You then apply component-specific patterns to fix buttons, images, text inputs, toggles, and headers.

Does Liquid Glass design require special accessibility adjustments?

Liquid Glass design requires accessibility adjustments for transparency, contrast, and reading order. Implementing these improvements ensures VoiceOver users perceive UI elements effectively despite the visual styling.

Can I use this approach to fix VoiceOver reading order across multiple screens?

Yes, you can fix VoiceOver reading order across multiple React Native screens. The implementation provides practical guidelines and patterns to adjust the navigation sequence for headers, buttons, and text inputs on each screen.

Why does VoiceOver skip elements in my React Native app?

VoiceOver skips elements when accessibilityRole or accessibilityLabel properties are missing or incorrectly configured. Auditing the component tree and enforcing proper attributes for buttons, images, and text inputs resolves these gaps.