Agent SkillsvmDeshpande/ai-agent-automation › accessibility-compliance

accessibility-compliance

GitHub

实现符合 WCAG 2.2 标准的无障碍界面,涵盖 ARIA 模式、屏幕阅读器支持及包容性设计。用于审计可访问性、修复违规项及构建通用用户体验。

.agents/skills/accessibility-compliance/SKILL.md vmDeshpande/ai-agent-automation

Trigger Scenarios

实施 WCAG 2.2 合规性 构建屏幕阅读器兼容接口 添加键盘导航功能 进行无障碍审计

Install

npx skills add vmDeshpande/ai-agent-automation --skill accessibility-compliance -g -y
More Options

Non-standard path

npx skills add https://github.com/vmDeshpande/ai-agent-automation/tree/main/.agents/skills/accessibility-compliance -g -y

Use without installing

npx skills use vmDeshpande/ai-agent-automation@accessibility-compliance

指定 Agent (Claude Code)

npx skills add vmDeshpande/ai-agent-automation --skill accessibility-compliance -a claude-code -g -y

安装 repo 全部 skill

npx skills add vmDeshpande/ai-agent-automation --all -g -y

预览 repo 内 skill

npx skills add vmDeshpande/ai-agent-automation --list

SKILL.md

Frontmatter
{
    "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)

Version History

  • 984893c Current 2026-08-20 08:52

Same Skill Collection

.agents/skills/core-web-vitals/SKILL.md
.agents/skills/deploy-to-vercel/SKILL.md
.agents/skills/docker-expert/SKILL.md
.agents/skills/github-actions-docs/SKILL.md
.agents/skills/wcag-audit-patterns/SKILL.md

Metadata

Files
0
Version
984893c
Hash
3ad0fbcb
Indexed
2026-08-20 08:52

- 위키
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-25 05:44
浙ICP备14020137号-1 $방문자$