Does it support the 'Reduce Transparency' iOS setting?

Yes, the skill includes specific code patterns to detect this system setting and provide opaque fallback backgrounds for better visibility.

Can it detect contrast issues automatically?

It provides implementation patterns to ensure WCAG AA compliance, specifically addressing readability issues on blurred or transparent backgrounds.

How does it handle localized accessibility labels?

The skill is designed to generate natural-sounding labels, defaults to Japanese context based on the provided instructions, but can be adapted for any language.

Does this skill work with standard React Native components?

Yes, while it includes specialized logic for Liquid Glass, it fully supports standard components like Pressable, Image, TextInput, and Switch.

How does it treat decorative icons and images?

It identifies purely decorative elements and applies 'accessible={false}' to ensure they are skipped by screen readers, reducing audio clutter.

Mobile Accessibility & VoiceOver Optimizer

Name: Mobile Accessibility & VoiceOver Optimizer
Author: takapom

bytakapom

0•

Mobile Development

Optimizes React Native applications for iPhone VoiceOver and ensures WCAG-compliant contrast for specialized UI designs.

This skill provides specialized guidance for implementing comprehensive accessibility (a11y) features in React Native applications, with a primary focus on iOS VoiceOver compatibility. It automates the configuration of accessibility roles, labels, and hints across standard UI components while offering unique support for the Liquid Glass design system. The skill ensures high-contrast readability, manages system-level 'Reduce Transparency' settings, and correctly groups elements to provide a seamless and intuitive navigation experience for users with visual impairments.

주요 기능

01Smart grouping of related UI elements to improve screen reader flow

02Automated configuration of VoiceOver roles and labels for React Native components

03Dynamic handling of 'Reduce Transparency' accessibility system settings

04Context-aware labeling for functional icons and decorative images

050 GitHub stars

06WCAG AA contrast enforcement for Liquid Glass and blurred UI elements

사용 사례

01Standardizing localized screen reader hints and labels across a mobile project

02Ensuring high-fidelity 'glass' UI designs meet mobile accessibility standards

03Auditing and repairing accessibility gaps in complex React Native screens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add takapom/trip-app accessibility

For use in Claude.ai and ChatGPT

Download Skill