intermediateCreativity & Design

Accessibility Compliance

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.

View source
66OpxScoreProvisional
Community resultNot enough feedback0 votes
Model evidenceNo verified testsModel fit pending

Score breakdown

Estimated from the available content and source signals.

Provisional
Documentation80
Practical value46
Evidence63
Source trust80

Model compatibility

Inferred fit is not the same as a recorded hands-on test.

ClaudeuntestedNo model-specific signal or recorded compatibility test was found.
ChatGPTuntestedNo model-specific signal or recorded compatibility test was found.
GeminiuntestedNo model-specific signal or recorded compatibility test was found.
CopilotuntestedNo model-specific signal or recorded compatibility test was found.
LlamauntestedNo model-specific signal or recorded compatibility test was found.
PerplexityuntestedNo model-specific signal or recorded compatibility test was found.
MistraluntestedNo model-specific signal or recorded compatibility test was found.
GrokuntestedNo model-specific signal or recorded compatibility test was found.

Overview

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)

Best for

  • 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

Tips and best practices

  • Use Semantic HTML: Prefer native elements over ARIA when possible
  • Test with Real Users: Include people with disabilities in user testing
  • Keyboard First: Design interactions to work without a mouse
  • Don't Disable Focus Styles: Style them, don't remove them
  • Provide Text Alternatives: All non-text content needs descriptions
  • Support Zoom: Content should work at 200% zoom
  • Announce Changes: Use live regions for dynamic content
  • Respect Preferences: Honor prefers-reduced-motion and prefers-contrast

What This Skill Can Do

AI-generated examples showing real capabilities

Was this skill useful?

Be the first to share a result.

Related skills