accessibility-compliance
實作符合 WCAG 2.2 的無障礙介面，含 ARIA、螢幕閱讀器和行動裝置支援
中文翻譯
--- name: accessibility-compliance description: 實作符合 WCAG 2.2 的介面，涵蓋行動裝置無障礙、包容性設計模式和輔助科技支援。在稽核無障礙、實作 ARIA 模式、為螢幕閱讀器建構介面，或確保包容性的使用者體驗時使用。 --- # 無障礙合規 掌握無障礙的實作，建立人人都能用的包容性體驗，包括身心障礙的使用者。 ## 何時使用這個 Skill - 實作 WCAG 2.2 Level AA 或 AAA 合規 - 建構螢幕閱讀器可用的介面 - 為互動元件加上鍵盤導覽 - 實作焦點管理和焦點鎖定（focus trapping） - 建立有正確標籤的無障礙表單 - 支援減少動態效果和高對比的偏好設定 - 建構行動裝置的無障礙功能（iOS VoiceOver、Android TalkBack） - 進行無障礙稽核並修正違規項目 ## 詳細模式與實作範例 詳細的模式文件放在 `references/details.md`。上面的導覽層不夠用時，再讀那個檔案。 ## 最佳實務 1. **使用語意化 HTML**：可以的話優先用原生元素，不要用 ARIA 2. **跟真實使用者一起測試**：使用者測試要納入身心障礙者 3. **鍵盤優先**：設計出不用滑鼠也能操作的互動 4. **不要停用焦點樣式**：幫它設計樣式，不要把它移除 5. **提供文字替代**：所有非文字內容都需要描述 6. **支援縮放**：內容在 200% 縮放下要能正常使用 7. **宣告變化**：動態內容要用 live region 8. **尊重偏好設定**：遵守 prefers-reduced-motion 和 prefers-contrast ## 常見問題 - **缺少 alt 文字**：圖片沒有描述 - **色彩對比不佳**：文字在背景上很難讀 - **鍵盤陷阱**：焦點卡在元件裡 - **缺少標籤**：表單輸入沒有對應的標籤 - **自動播放媒體**：不是使用者主動觸發就開始播放的內容 - **無法存取的自訂控制項**：把原生功能做得很差 - **缺少 skip link**：沒辦法跳過重複的內容 - **焦點順序問題**：Tab 順序跟視覺順序不一致 ## 測試工具 - **自動化**：axe DevTools、WAVE、Lighthouse - **手動**：VoiceOver（macOS/iOS）、NVDA/JAWS（Windows）、TalkBack（Android） - **模擬器**：NoCoffee（視覺）、Silktide（各種障礙）
英文原文
--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- # Accessibility Compliance Master accessibility implementation to create inclusive experiences that work for everyone, including users with disabilities. ## When to Use This Skill - Implementing WCAG 2.2 Level AA or AAA compliance - Building screen reader accessible interfaces - Adding keyboard navigation to interactive components - Implementing focus management and focus trapping - Creating accessible forms with proper labeling - Supporting reduced motion and high contrast preferences - Building mobile accessibility features (iOS VoiceOver, Android TalkBack) - Conducting accessibility audits and fixing violations ## Detailed patterns and worked examples Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient. ## Best Practices 1. **Use Semantic HTML**: Prefer native elements over ARIA when possible 2. **Test with Real Users**: Include people with disabilities in user testing 3. **Keyboard First**: Design interactions to work without a mouse 4. **Don't Disable Focus Styles**: Style them, don't remove them 5. **Provide Text Alternatives**: All non-text content needs descriptions 6. **Support Zoom**: Content should work at 200% zoom 7. **Announce Changes**: Use live regions for dynamic content 8. **Respect Preferences**: Honor prefers-reduced-motion and prefers-contrast ## Common Issues - **Missing alt text**: Images without descriptions - **Poor color contrast**: Text hard to read against background - **Keyboard traps**: Focus stuck in component - **Missing labels**: Form inputs without associated labels - **Auto-playing media**: Content that plays without user initiation - **Inaccessible custom controls**: Recreating native functionality poorly - **Missing skip links**: No way to bypass repetitive content - **Focus order issues**: Tab order doesn't match visual order ## Testing Tools - **Automated**: axe DevTools, WAVE, Lighthouse - **Manual**: VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android) - **Simulators**: NoCoffee (vision), Silktide (various disabilities)