Capacitor Accessibility

Cap-go/capgo-skills/plugins/capacitor-quality/skills/capacitor-accessibility

作者 Cap-go2cfb277a148832bdb1a835b01e4de323687b498b無授權條款72 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫昨天更新

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.

僅含說明Software Development

AI 產生的概覽

為 Capacitor 應用程式提供無障礙指南，涵蓋螢幕閱讀器、語意化 HTML、焦點管理與 WCAG 合規。

功能: 提供 Capacitor 應用程式的無障礙檢查清單與程式碼範例，包括 ARIA 標籤、即時區域、觸控目標尺寸、色彩對比度、焦點管理以及模態視窗焦點鎖定。也示範 iOS VoiceOver 與 Android TalkBack 的原生程式碼片段，並列出測試步驟與 WCAG 資源。產出的是指引與範例程式碼，而非產生的成品檔案。
適用情境: 當使用者想讓 Capacitor 應用程式具備無障礙能力、加入螢幕閱讀器支援、處理焦點管理，或符合 WCAG 要求時使用。
執行需求: 不需要指令碼或套件，內容僅為說明。若要依範例進行測試，可選地需要已啟用 VoiceOver 或 TalkBack 的模擬器或裝置，以及使用 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

來源與署名

來源：Cap-go/capgo-skills位於plugins/capacitor-quality/skills/capacitor-accessibility提交2cfb277

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

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

來源與署名

更多來自 Cap-go/capgo-skills 的技能

Capgo Release Workflows

Capgo Release Management

Capgo Cloud

Capacitor Mcp

Capgo Organization Management

Capgo Cli Usage

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices