capacitor-accessibility

Guide WCAG-compliant accessibility in Capacitor apps with screen reader and focus management.

58|5|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-accessibility
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: capacitor-accessibility
Source: https://github.com/Cap-go/capgo-skills/tree/main/skills/capacitor-accessibility
Command: npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accessibility guidance for Capacitor apps to ensure screen reader support, semantic HTML, and WCAG-compliant focus management so apps are usable by everyone.

Core Features & Use Cases

  • Screen reader labeling and hints for controls
  • Focus management patterns for modals and navigation
  • Keyboard accessibility and color-contrast guidance
  • Use Case: adapting a complex form within a Capacitor app to be navigable by keyboard users and screen readers

Quick Start

Follow the accessibility checklist to implement screen reader labels, focus management patterns, and WCAG-compliant contrasts in your Capacitor app.

Frequently Asked Questions about capacitor-accessibility

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

FAQPage Schema
How do I make my Capacitor app accessible to screen readers?

To make a Capacitor app accessible, you need to provide proper screen reader labels, use semantic HTML, and implement focus management patterns for controls and navigation within your web views.

What's the best way to manage focus in mobile modals for WCAG compliance?

WCAG-compliant focus management requires trapping focus within modals and ensuring logical navigation paths. This Skill provides specific focus management patterns for modals and navigation transitions in mobile web views.

Does this accessibility guidance apply to both iOS and Android Capacitor apps?

Accessibility guidance applies to web views within mobile applications across iOS, Android, and web contexts, ensuring consistent screen reader support and keyboard navigation behaviors.

How do I ensure keyboard navigation works in a complex Capacitor form?

To ensure keyboard navigation in complex Capacitor forms, apply ARIA practices, proper control labeling, and structured focus management patterns to make all interactive elements navigable by keyboard users.

What WCAG color contrast guidelines should I follow for mobile web views?

WCAG color contrast guidelines require maintaining specific visual contrast ratios for text and controls. This Skill provides validation guidance to ensure your mobile app's color choices meet these accessibility standards.

Why do my ARIA labels not announce correctly on mobile screen readers?

ARIA labels often fail due to improper semantic HTML structure or missing focus management. Following established ARIA practices and proper labeling techniques ensures screen readers correctly announce controls.