accessibility-compliance
A guide and toolkit for building accessible, WCAG-compliant web applications.
Install
mkdir -p .claude/skills/accessibility-compliance && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/738" && unzip -o skill.zip -d .claude/skills/accessibility-compliance && rm skill.zipInstalls to .claude/skills/accessibility-compliance
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Audit interfaces for WCAG 2.2
- →Validate ARIA label implementation
- →Test keyboard navigation flow
- →Apply accessibility design patterns
How it works
Applies a set of documented accessibility patterns (focus management, semantic HTML) to assess compliance against current standards.
Inputs & outputs
When to use accessibility-compliance
- →Auditing web accessibility
- →Implementing keyboard navigation
- →Fixing ARIA label issues
- →Designing for screen reader support
About this skill
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
- 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
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)
When not to use it
- →Visual aesthetic design tasks
- →Functional performance load testing
Limitations
- →Automated audits miss human usage context
- →Cannot fully replace user testing
- →Complexity varies with component custom controls
How it compares
It focuses on structural and semantic standards compliance rather than visual or user-experience preference.
Compared to similar skills
accessibility-compliance side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| accessibility-compliance (this skill) | 45 | 2mo | No flags | Intermediate |
| feature-flags | 6 | 6mo | Review | Intermediate |
| react-useeffect | 7 | 7mo | No flags | Intermediate |
| react-ui-patterns | 2 | 7mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by wshobson
View all by wshobson →You might also like
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
react-useeffect
jarrodwatts
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
react-ui-patterns
ChrisWiles
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
writing-react-effects
dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
web-coder
mochan-tk
Use when: implementing frontend web apps with HTML, CSS, TypeScript, React, accessibility, responsive layout, or performance concerns.
web-coder
Bonzokoles
Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminolo