Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor

accessibility-compliance — Claude Code skill for accessibility

This skill guides accessibility audits and interface work involving keyboard navigation, screen readers, and forms. Use it when building against WCAG 2.2.

Install into Claude Code · Plugin marketplace All methods and platforms ↓ 
/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflows
Open on GitHub

What accessibility-compliance does

The skill covers WCAG 2.2 interface work, from keyboard navigation and focus management to labeled forms and screen reader support. It also addresses mobile accessibility, reduced-motion and contrast preferences, text alternatives, and content that remains usable at 200% zoom.

It lists common issues and testing tools: axe DevTools, WAVE, and Lighthouse for automated checks; VoiceOver, NVDA/JAWS, and TalkBack for manual testing. More detailed patterns and examples are in references/details.md. Test with a keyboard and assistive technology.

Install it when you are building or auditing accessible interfaces. For projects with no accessibility work, its guidance may be unnecessary.

What it helps with

  • audit an interface for accessibility issues
  • add keyboard navigation to interactive components
  • manage focus and trap it when needed
  • connect form fields to labels
  • support VoiceOver and TalkBack

Example prompts for the agent

  • Audit this page for WCAG 2.2 accessibility issues.
  • Add keyboard navigation and focus management to this component.
  • Check the form labels and screen reader support.

How to install accessibility-compliance

1Plugin marketplace

/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflows

This installs the whole ui-design plugin with all its skills

2Skills CLI (Vercel)

npx skills add wshobson/agents --skill accessibility-compliance -a claude-code

3Manually: put the files in place

~/.claude/skills/accessibility-compliance/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/accessibility-compliance/

From the same set213

The whole set →
typescript-advanced-types Seth Hobson Guides an agent through advanced TypeScript types, from generics to conditional and mapped types. Use it for typed libraries, API clients, or strict configuration objects. Claude Code CX Codex Cursor 92,169installs tailwind-design-system Seth Hobson Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. Claude Code CX Codex Cursor 70,180installs brand-landingpage Travis D. Elliott This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. Use it when there’s no established design yet. Claude Code CX Codex Cursor 39,476installs python-testing-patterns Seth Hobson This skill guides Python testing with pytest, fixtures and mocks. Use it when building a test suite or tracking down failing checks. Claude Code CX Codex Cursor 36,943installs python-performance-optimization Seth Hobson This skill profiles Python code to locate CPU and memory bottlenecks. Use it when an application responds slowly or consumes too many resources. Claude Code CX Codex Cursor 35,675installs nextjs-app-router-patterns Seth Hobson This skill covers Next.js App Router patterns for rendering, routing, and data fetching. Use it when starting an App Router project or moving from Pages Router. Claude Code CX Codex Cursor 32,529installs api-design-principles Seth Hobson Use this skill to plan or review REST and GraphQL APIs. It helps when writing a specification or setting API conventions for a team. Claude Code CX Codex Cursor 30,348installs code-review-excellence Seth Hobson This skill guides pull request reviews, catches logic and security issues, and helps teams give specific feedback. Use it for review standards or developer mentoring. Claude Code CX Codex Cursor 30,193installs

Similar

winui3-migration-guide official github This skill helps move UWP code to WinUI 3 and Windows App SDK. Use it to check API replacements, namespaces, and common Copilot mistakes. GitHub Copilot 5,700installs ima-sdk-client-side official Google LLC This skill supports Google IMA SDK integrations for client-side video and audio ads requested through VAST or VMAP. Use it for websites, apps, and TV platforms. Claude Code Gemini CLI CX Codex 4,500installs ima-dai-sdk official Google LLC This skill guides Google IMA DAI SDK integration for loading HLS and DASH streams. Use it for livestreams or video on demand in apps and websites. Claude Code Gemini CLI CX Codex 4,300installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. Claude Code CX Codex Cursor +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. Claude Code CX Codex Cursor +1 1,200,000installs

Questions about accessibility-compliance

How do I install accessibility-compliance in Claude Code?

Run npx skills add wshobson/agents --skill accessibility-compliance -a claude-code. The listed Claude Code marketplace commands are another installation option.

What does accessibility-compliance do?

It guides WCAG 2.2 interface work and audits, including keyboard access, screen reader support, and accessible forms.

Which accessibility testing tools does the skill cover?

It lists axe DevTools, WAVE, and Lighthouse for automated checks, plus VoiceOver, NVDA/JAWS, and TalkBack for manual testing.

Source text

SKILL.md · MIT 
---
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)

© Seth Hobson · MIT · wshobson/agents

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor