accessibility-compliance – Design & UI skill for AI agents
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.
Install the accessibility-compliance skill with one command
Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/accessibility-compliance-05729.tgz | tar xz -C ~/.claude/skills
Call it in Claude Code: /accessibility-compliance – then describe the task you want done.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/accessibility-compliance-05729.tgz | tar xz -C ~/.codex/skills
Call it in Codex: $accessibility-compliance – then describe the task you want done.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/accessibility-compliance-05729.tgz | tar xz -C ~/.hermes/skills
Call it in Hermes Agent: /accessibility-compliance – then describe the task you want done.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/accessibility-compliance-05729.tgz | tar xz -C ~/.deepcode/skills
Call it in DeepSeek: /accessibility-compliance – then describe the task you want done.
SKILL.md content
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)
Related skills
- brand-guidelines – Applies OpenAI's brand colors and typography to any artifact that should match the…
- chatgpt-apps – Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine…
- baoyu-comic – Knowledge comic creator supporting multiple art styles and tones. Creates original…
- canvas-design – Create beautiful visual art in .png and .pdf documents using design philosophy. You…
- image-generator – Generate or edit images from text and local files, image URLs, or data URLs through…
- adversarial-ux-test – Roleplay a hostile user to find and triage UX pain points.
- brand-guidelines – Applies Anthropic's official brand colors and typography to any sort of artifact that…
- baoyu-compress-image – Compresses images to WebP (default) or PNG with automatic tool selection. Use when user…