mcpField
A
accessibility-compliance

accessibility-compliance

github.com/wshobsonDesign & UI41.9k14.8k installsUpdated 2w ago
Repository

About accessibility-compliance

A skill for developers and designers implementing and evaluating accessible interfaces. It covers WCAG guidance, interaction patterns, common issues, and testing methods.

Key features

  1. 01WCAG 2.2 AA and AAA guidance
  2. 02Keyboard and focus management
  3. 03Accessible forms and screen readers
  4. 04Reduced-motion and contrast preferences
  5. 05Automated and manual testing tools

Use cases

  1. 01Auditing an interface for accessibility
  2. 02Adding keyboard navigation to controls
  3. 03Building accessible forms
  4. 04Checking mobile screen-reader support

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

After installing, type/accessibility-compliancein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
aria-patterns.md
details.md
mobile-accessibility.md
wcag-guidelines.md

Details

From the project README

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)

Comments

Markdown supported