Can it fix focus traps in mobile modals?

Yes, it includes specialized JavaScript and CSS logic for trapping focus within modals and bottom sheets and returning focus to the trigger element upon closure.

What WCAG level does this skill aim for?

The skill targets WCAG 2.1 Level AA and AAA criteria, including the specific 44x44px target size requirements for mobile devices.

Does this skill support both iOS and Android?

Yes, it provides specific implementation patterns and testing checklists for both VoiceOver (iOS) and TalkBack (Android) screen readers.

How does it handle dynamic content updates?

It implements ARIA live regions with polite and assertive announcement priorities to ensure screen reader users are notified of toasts, errors, and loading states.

Does it support user motion preferences?

Yes, it provides CSS snippets to respect 'prefers-reduced-motion' and 'prefers-contrast' settings to accommodate users with vestibular disorders or visual impairments.

Mobile Accessibility Auditor

Name: Mobile Accessibility Auditor
Author: cbemister

bycbemister

0•

Mobile Development

Audits and implements WCAG 2.1 compliant accessibility features for mobile interfaces, including screen reader support and focus management.

This skill enables Claude to perform comprehensive accessibility audits and implementations tailored for mobile environments. It ensures mobile applications meet WCAG 2.1 criteria by verifying touch target sizes, managing focus for complex UI elements like modals and bottom sheets, and providing robust support for screen readers like VoiceOver and TalkBack. It is particularly useful for frontend and mobile developers looking to improve inclusivity, fix focus traps, and handle dynamic content announcements using ARIA live regions.

Key Features

01Touch target size and spacing verification

02Mobile-first focus management for modals and sheets

03Automated audit for WCAG 2.1 mobile criteria

040 GitHub stars

05VoiceOver and TalkBack screen reader optimization

06Reduced motion and high-contrast CSS implementation

Use Cases

01Implementing ARIA live regions for dynamic mobile status updates

02Fixing focus traps in mobile bottom sheets and navigation menus

03Auditing a React Native or web-based mobile app for accessibility compliance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cbemister/claude-code-utils mobile-accessibility

For use in Claude.ai and ChatGPT

Download Skill