Accessibility Compliance
FreeEnsure your interfaces meet WCAG 2.2 standards.
Free · Opens the source repo
What Accessibility Compliance does
The Accessibility Compliance skill is designed to help developers and designers implement accessible web interfaces that adhere to the WCAG 2.2 guidelines. This skill focuses on creating inclusive user experiences for individuals with disabilities, ensuring that applications are usable by everyone. It covers a range of topics, including mobile accessibility, ARIA patterns, and assistive technology support, making it a vital resource for anyone involved in web development or design.
By utilizing this skill, users can learn to build screen reader-friendly interfaces, implement keyboard navigation, and create accessible forms with proper labeling. It emphasizes best practices such as using semantic HTML, testing with real users, and respecting user preferences like reduced motion and high contrast. The skill also provides common issues to watch out for, such as missing alt text and poor color contrast, which can significantly hinder accessibility.
The skill includes detailed patterns and worked examples, which can be found in the bundled references. This documentation serves as a practical guide for developers looking to audit their accessibility efforts or implement new features that comply with accessibility standards. With this skill, users can ensure that their applications not only meet legal requirements but also provide a better experience for all users, particularly those with disabilities.
When to use it
Use this skill when developing applications that need to meet WCAG 2.2 compliance, particularly for users relying on assistive technologies.
When not to use it
This skill may not be suitable for projects that do not require accessibility considerations or for teams not focused on inclusive design principles.
What you can build with it
Auditing Existing Applications
Use this skill to conduct thorough accessibility audits on your web applications, ensuring compliance with WCAG 2.2.
Developing New Features
Implement new features with accessibility in mind, using ARIA patterns and best practices to enhance user experience for all.
Training Teams on Accessibility
Utilize the resources in this skill to train your development and design teams on the importance of accessibility and how to implement it effectively.
How to install Accessibility Compliance
View source1. Install with the skills CLI
npx skills add wshobson/agents/accessibility-compliance --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by wshobsonAccessibility 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)
Frequently asked questions about Accessibility Compliance
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.