Capacitor Accessibility

cap-go/capgo-skills/skills/capacitor-accessibility

作者 cap-go2cfb277a1488无许可证72 个星标收录于 2026年10月8日更新于 2026年10月8日仓库今天更新

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位于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 的技能

Webapp To Capacitor

Tailwind Capacitor

Safe Area Handling

Konsta Ui

Ios Android Logs

Ionic Design

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices