Capacitor Accessibility

A solid reference for making Capacitor apps accessible across web and native platforms. Covers the essentials like semantic HTML, ARIA labels, focus trapping in modals, and the 44x44pt touch target rule. Includes practical code snippets for screen reader support, live regions for dynamic announcements, and native implementations for iOS VoiceOver and Android TalkBack. The quick checklist hits WCAG basics like 4.5:1 color contrast and keyboard navigation. Good for when you need to actually implement accessibility rather than just read about why it matters. The focus management examples are especially useful since that's where most hybrid apps fall short.

skills.sh installs: 179
GitHub stars: 43
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capacitor-skills --skill capacitor-accessibility --agent claude-code

Installs into .claude/skills of the current project.

Files

Accessibility in Capacitor Apps

The UI is web content inside WKWebView / Android WebView, so standard semantic HTML and ARIA do most of the work. This skill covers where the WebView and native layers behave differently from a browser.

When to Use

TRIGGER when:

User asks for VoiceOver/TalkBack support, an accessibility audit, WCAG 2.2 / EAA / ADA compliance.
Text does not grow with iOS Larger Text, or the layout breaks at large Android font sizes.
Screen reader does not announce page changes, toasts, or loading states.
A native view (map, camera preview, video player) cannot be reached by the screen reader.
User wants @capacitor/screen-reader or @capacitor/text-zoom.

Do not use:

Ionic component APIs/theming -> ionic-design; Konsta/Tailwind -> konsta-ui, tailwind-capacitor.
Content under notch/home indicator -> safe-area-handling.
Keyboard covering inputs -> capacitor-keyboard.
E2E test infrastructure -> capacitor-testing.