Capacitor Accessibility

This is your go-to reference when you need to make a Capacitor app accessible. It covers the practical stuff: screen reader labels, ARIA attributes, focus management, and the 44x44pt touch target rule. You get working code for live regions, focus trapping in modals, and native VoiceOver/TalkBack setup. The quick checklist hits WCAG basics like 4.5:1 contrast ratios and semantic HTML. Honestly, accessibility is easy to overlook until you need it, and this gives you the patterns to do it right from the start instead of retrofitting later.

skills.sh installs: 1.3K
GitHub stars: 77
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capgo-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.