Capacitor Accessibility

The capacitor-accessibility skill enables AI agents to inspect and enhance web applications built with Capacitor, ensuring they meet accessibility standards. It provides direct access to underlying DOM elements and platform-specific APIs to fix issues for screen readers and assistive technologies.

When to use it

• Audit mobile wrappers: Verify if a native app wrapped by Capacitor exposes semantic HTML correctly to accessibility tools.
• Fix dynamic content: Automatically adjust ARIA labels or roles for UI components generated dynamically at runtime.
• Cross-platform compliance: Ensure consistent accessibility behavior between iOS and Android versions of the same web app.
• Debug assistive tech: Identify why screen readers fail to announce specific buttons or form inputs within a Capacitor project.

Key capabilities

• Inspect DOM structure for missing semantic tags (e.g., <button>, <label>).
• Detect and report missing ARIA attributes like aria-label or role.
• Validate color contrast ratios against WCAG guidelines.
• Trigger platform-specific accessibility checks on iOS and Android.

Example prompts

• "Scan my Capacitor app for any interactive elements missing ARIA labels."
• "Check if the form inputs in my mobile web view are keyboard accessible."
• "Generate a report on WCAG 2.1 compliance issues found in my Capacitor project's DOM."

Tips & gotchas

This skill requires a running Capacitor project with access to its native bridge or webview context; it cannot analyze static HTML files directly. Ensure your app is built for the target platform before running deep accessibility audits, as some checks are OS-specific.