Capacitor Accessibility

by cap-go2cfb277a1488No license72 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

Accessibility guide for Capacitor apps covering screen readers, semantic HTML, focus management, and WCAG compliance. Use this skill when users need to make their app accessible.

Instructions onlySoftware Development

AI-generated overview

Guide for making Capacitor apps accessible, covering screen readers, semantic HTML, focus management and WCAG compliance.

What it does: Provides an accessibility checklist and code examples for Capacitor apps, including ARIA labels, live regions, touch target sizing, color contrast, focus management and modal focus trapping. It also shows native iOS VoiceOver and Android TalkBack snippets and lists testing steps plus WCAG resources. The deliverable is guidance and example code rather than a generated artifact.
When to use it: Use when a user wants to make a Capacitor app accessible, add screen reader support, handle focus management, or meet WCAG requirements.
Requirements: No scripts or packages are required; it is instructions only. Following the testing examples optionally needs a simulator or device with VoiceOver or TalkBack and network access for the axe-core CLI.

Accessibility in Capacitor Apps

Build inclusive apps that work for everyone.

When to Use This Skill

User needs accessibility
User wants screen reader support
User asks about WCAG
User needs focus management

Quick Checklist

Screen Reader Support

Labels and Hints

tsx

// Accessible button<button  aria-label="Delete item"  aria-describedby="delete-hint">  <TrashIcon /></button><span id="delete-hint" className="sr-only">  Permanently removes this item</span>
// Accessible input<label htmlFor="email">Email</label><input  id="email"  type="email"  aria-required="true"  aria-invalid={hasError}  aria-describedby={hasError ? "email-error" : undefined}/>{hasError && <span id="email-error">Invalid email</span>}

// Accessible button<button  aria-label="Delete item"  aria-describedby="delete-hint">  <TrashIcon /></button><span id="delete-hint" className="sr-only">  Permanently removes this item</span>
// Accessible input<label htmlFor="email">Email</label><input  id="email"  type="email"  aria-required="true"  aria-invalid={hasError}  aria-describedby={hasError ? "email-error" : undefined}/>{hasError && <span id="email-error">Invalid email</span>}

Live Regions

tsx

// Announce dynamic content<div aria-live="polite" aria-atomic="true">  {message}</div>
// Urgent announcements<div aria-live="assertive" role="alert">  {error}</div>

// Announce dynamic content<div aria-live="polite" aria-atomic="true">  {message}</div>
// Urgent announcements<div aria-live="assertive" role="alert">  {error}</div>

Touch Targets

css

/* Minimum 44x44pt */button, a, input {  min-height: 44px;  min-width: 44px;}
/* Icon buttons need padding */.icon-button {  padding: 12px;}

/* Minimum 44x44pt */button, a, input {  min-height: 44px;  min-width: 44px;}
/* Icon buttons need padding */.icon-button {  padding: 12px;}

Color Contrast

css

/* Good contrast (4.5:1 for text) */.text {  color: #333333;  background: #ffffff;}
/* Don't rely on color alone */.error {  color: #d32f2f;  border-left: 4px solid #d32f2f; /* Visual indicator */}.error::before {  content: "⚠ "; /* Icon indicator */}

/* Good contrast (4.5:1 for text) */.text {  color: #333333;  background: #ffffff;}
/* Don't rely on color alone */.error {  color: #d32f2f;  border-left: 4px solid #d32f2f; /* Visual indicator */}.error::before {  content: "⚠ "; /* Icon indicator */}

Focus Management

typescript

// Move focus after navigationuseEffect(() => {  const heading = document.querySelector('h1');  heading?.focus();}, [page]);
// Trap focus in modalsfunction trapFocus(element: HTMLElement) {  const focusable = element.querySelectorAll(    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'  );  const first = focusable[0] as HTMLElement;  const last = focusable[focusable.length - 1] as HTMLElement;
  element.addEventListener('keydown', (e) => {    if (e.key === 'Tab') {      if (e.shiftKey && document.activeElement === first) {        e.preventDefault();        last.focus();      } else if (!e.shiftKey && document.activeElement === last) {        e.preventDefault();        first.focus();      }    }  });}

// Move focus after navigationuseEffect(() => {  const heading = document.querySelector('h1');  heading?.focus();}, [page]);
// Trap focus in modalsfunction trapFocus(element: HTMLElement) {  const focusable = element.querySelectorAll(    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'  );  const first = focusable[0] as HTMLElement;  const last = focusable[focusable.length - 1] as HTMLElement;
  element.addEventListener('keydown', (e) => {    if (e.key === 'Tab') {      if (e.shiftKey && document.activeElement === first) {        e.preventDefault();        last.focus();      } else if (!e.shiftKey && document.activeElement === last) {        e.preventDefault();        first.focus();      }    }  });}

Native Accessibility

iOS VoiceOver

swift

// Custom accessibility in native codeelement.isAccessibilityElement = trueelement.accessibilityLabel = "Play video"element.accessibilityHint = "Double tap to play"element.accessibilityTraits = .button

// Custom accessibility in native codeelement.isAccessibilityElement = trueelement.accessibilityLabel = "Play video"element.accessibilityHint = "Double tap to play"element.accessibilityTraits = .button

Android TalkBack

kotlin

// Custom accessibilityViewCompat.setAccessibilityDelegate(view, object : AccessibilityDelegateCompat() {    override fun onInitializeAccessibilityNodeInfo(        host: View,        info: AccessibilityNodeInfoCompat    ) {        super.onInitializeAccessibilityNodeInfo(host, info)        info.contentDescription = "Play video"    }})

// Custom accessibilityViewCompat.setAccessibilityDelegate(view, object : AccessibilityDelegateCompat() {    override fun onInitializeAccessibilityNodeInfo(        host: View,        info: AccessibilityNodeInfoCompat    ) {        super.onInitializeAccessibilityNodeInfo(host, info)        info.contentDescription = "Play video"    }})

Testing

bash

# iOS: Enable VoiceOver in Simulator# Settings > Accessibility > VoiceOver
# Android: Enable TalkBack# Settings > Accessibility > TalkBack
# Web: Use axe-corenpx @axe-core/cli https://localhost:3000

# iOS: Enable VoiceOver in Simulator# Settings > Accessibility > VoiceOver
# Android: Enable TalkBack# Settings > Accessibility > TalkBack
# Web: Use axe-corenpx @axe-core/cli https://localhost:3000

Resources

WCAG Guidelines: https://www.w3.org/WAI/WCAG21/quickref
iOS Accessibility: https://developer.apple.com/accessibility
Android Accessibility: https://developer.android.com/accessibility

Source and attribution

Source:cap-go/capgo-skillsinskills/capacitor-accessibilityat commit2cfb277

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Capacitor Accessibility

Accessibility in Capacitor Apps

When to Use This Skill

Quick Checklist

Screen Reader Support

Labels and Hints

Live Regions

Touch Targets

Color Contrast

Focus Management

Native Accessibility

iOS VoiceOver

Android TalkBack

Testing

Resources

Source and attribution

More from cap-go/capgo-skills

Webapp To Capacitor

Tailwind Capacitor

Safe Area Handling

Konsta Ui

Ios Android Logs

Ionic Design

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices