accessibility-compliance
Enables your agent to create easy-to-use interfaces for everyone. It ensures designs are accessible, working well with assistive technologies and for people with disabilities.
What it does
This tool helps create websites and apps that everyone can use, including people with disabilities. It ensures everything works well with screen readers, keyboard navigation, and other assistive technologies.
When to use it
- ✓When building accessible websites for people with disabilities.
- ✓When testing if a website works with screen readers.
- ✓When ensuring a website can be navigated using only the keyboard.
Example of what to ask your AI
“I want this website to be accessible for visually impaired users.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool uses special code (semantic HTML) and follows rules (WCAG) to make sure screen readers and other technologies understand and navigate the content. It also checks if the site works well with a keyboard and respects preferences like high contrast.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add wshobson/agents --skill accessibility-complianceOr download just the file:
curl -L https://raw.githubusercontent.com/wshobson/agents/main/plugins/ui-design/skills/accessibility-compliance/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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)
FAQ
What are screen readers?
These are programs that read website or app content aloud, helping visually impaired people understand what's on the screen.
What is WCAG?
It's a set of international guidelines for making the web accessible to everyone.
Why use semantic HTML?
Semantic HTML uses the correct tags for each type of content (headings, paragraphs, buttons), which helps screen readers and other devices understand the structure and purpose of each part of the page.
Details
Original description by the author
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.
repo: wshobson/agents
Popularity
- GitHub stars
- 41k
- Ranking position
- #4968
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
screen-reader-testing
Has your agent test websites using screen readers to ensure they are accessible.
wshobson/agents
wcag-audit-patterns
Helps your agent audit websites for accessibility and fix issues according to WCAG guidelines.
wshobson/agents
multi-reviewer-patterns
Enables your agent to coordinate parallel code reviews, deduplicating findings and consolidating reports.
wshobson/agents
parallel-debugging
Allows the agent to debug complex issues with parallel investigations and root cause analysis.
wshobson/agents
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC