accessibility-compliance
wshobson/agents
Build WCAG 2.2 compliant interfaces with keyboard navigation, screen reader support, and inclusive design patterns.
What is accessibility-compliance?
Implement accessibility best practices to create interfaces that work for everyone, including users with disabilities. Use this skill when auditing accessibility, adding ARIA patterns, building for screen readers, or ensuring keyboard navigation and assistive technology support.
- Implement WCAG 2.2 Level AA/AAA compliance patterns
- Build screen reader accessible interfaces with semantic HTML and ARIA
- Add keyboard navigation and focus management to interactive components
- Create accessible forms with proper labeling and error handling
- Support reduced motion and high contrast user preferences
- Implement mobile accessibility features (VoiceOver, TalkBack)
How to install accessibility-compliance
npx skills add https://github.com/wshobson/agents --skill accessibility-complianceHow to use accessibility-compliance
- 1.Review the WCAG 2.2 guidelines relevant to your component or page
- 2.Use semantic HTML elements as the foundation (nav, button, form, etc.)
- 3.Add ARIA attributes only when semantic HTML is insufficient
- 4.Test keyboard navigation by tabbing through all interactive elements
- 5.Test with screen readers (VoiceOver, NVDA, or TalkBack) on target platforms
- 6.Verify color contrast meets AA or AAA standards using automated tools
- 7.Check that focus styles are visible and not removed
- 8.Validate that all images have alt text and dynamic content uses live regions
Use cases
- Auditing existing interfaces for WCAG compliance violations
- Adding keyboard navigation to custom interactive components
- Implementing accessible form validation and error messages
- Building screen reader support for dynamic content with live regions
- Ensuring mobile app accessibility for iOS and Android users
- Frontend developers building accessible web applications
- UX designers implementing inclusive design patterns
- QA engineers conducting accessibility testing
- Product teams ensuring compliance with accessibility standards
- Mobile developers building accessible iOS and Android experiences
accessibility-compliance FAQ
Prefer semantic HTML first (button, nav, form, etc.). Use ARIA only when semantic HTML cannot express the needed accessibility semantics.
Use automated tools like axe DevTools, WAVE, and Lighthouse for quick checks. For thorough testing, use actual screen readers: VoiceOver (macOS/iOS), NVDA/JAWS (Windows), or TalkBack (Android).
Missing alt text on images, poor color contrast, keyboard traps, missing form labels, auto-playing media, inaccessible custom controls, missing skip links, and incorrect tab order.
Yes, WCAG 2.2 requires content to remain functional and readable at 200% zoom. Test by zooming in your browser to verify layout doesn't break.
Use ARIA live regions (aria-live, aria-atomic) to announce changes to screen reader users. Choose the appropriate politeness level (polite, assertive) based on urgency.
Full instructions (SKILL.md)
Source of truth, from wshobson/agents.
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
- 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)
Related skills
More from wshobson/agents and the wider catalog.
tailwind-design-system
Build production-ready design systems with Tailwind CSS v4, design tokens, and component libraries.
typescript-advanced-types
Master TypeScript's advanced type system: generics, conditional types, mapped types, and utility types for type-safe applications.
nodejs-backend-patterns
Build production-ready Node.js backends with Express/Fastify, middleware patterns, auth, and database integration.
python-performance-optimization
Profile and optimize Python code using cProfile, memory profilers, and performance best practices.
brand-landingpage
Brand-first landing page designer with guided interviews and Stitch-powered iteration.
python-testing-patterns
Implement comprehensive testing strategies with pytest, fixtures, mocking, and test-driven development.