Accessibility Compliance
Unverified●29/40Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add accessibility-complianceWho is stuck, and on what
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.
The whole source
Frontmatter — 2 properties
| 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. |
| 1 | --- |
| 2 | name: accessibility-compliance |
| 3 | 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. |
| 4 | ---A5 — No allowed-tools declared — no way to tell what this skill may touch |
| 5 | |
| 6 | # Accessibility Compliance |
| 7 | |
| 8 | Master accessibility implementation to create inclusive experiences that work for everyone, including users with disabilities. |
| 9 | |
| 10 | ## When to Use This Skill |
| 11 | |
| 12 | - Implementing WCAG 2.2 Level AA or AAA compliance |
| 13 | - Building screen reader accessible interfaces |
| 14 | - Adding keyboard navigation to interactive components |
| 15 | - Implementing focus management and focus trapping |
| 16 | - Creating accessible forms with proper labeling |
| 17 | - Supporting reduced motion and high contrast preferences |
| 18 | - Building mobile accessibility features (iOS VoiceOver, Android TalkBack) |
| 19 | - Conducting accessibility audits and fixing violations |
| 20 | |
| 21 | ## Detailed patterns and worked examples |
| 22 | |
| 23 | Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient. |
| 24 | |
| 25 | ## Best Practices |
| 26 | |
| 27 | 1. **Use Semantic HTML**: Prefer native elements over ARIA when possible |
| 28 | 2. **Test with Real Users**: Include people with disabilities in user testing |
| 29 | 3. **Keyboard First**: Design interactions to work without a mouse |
| 30 | 4. **Don't Disable Focus Styles**: Style them, don't remove them |
| 31 | 5. **Provide Text Alternatives**: All non-text content needs descriptions |
| 32 | 6. **Support Zoom**: Content should work at 200% zoom |
| 33 | 7. **Announce Changes**: Use live regions for dynamic content |
| 34 | 8. **Respect Preferences**: Honor prefers-reduced-motion and prefers-contrast |
| 35 | |
| 36 | ## Common Issues |
| 37 | |
| 38 | - **Missing alt text**: Images without descriptions |
| 39 | - **Poor color contrast**: Text hard to read against background |
| 40 | - **Keyboard traps**: Focus stuck in component |
| 41 | - **Missing labels**: Form inputs without associated labels |
| 42 | - **Auto-playing media**: Content that plays without user initiation |
| 43 | - **Inaccessible custom controls**: Recreating native functionality poorly |
| 44 | - **Missing skip links**: No way to bypass repetitive content |
| 45 | - **Focus order issues**: Tab order doesn't match visual order |
| 46 | |
| 47 | ## Testing Tools |
| 48 | |
| 49 | - **Automated**: axe DevTools, WAVE, Lighthouse |
| 50 | - **Manual**: VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android) |
| 51 | - **Simulators**: NoCoffee (vision), Silktide (various disabilities) |
| 52 |
Reviews
Installed this one?Write the first review and take the Trailblazer badge.
Alternatives
Brand Protection — Amazon 🛡️Amazon brand protection toolkit. Detect hijackers, counterfeits, and unauthorized sellers. Includes MAP violation monitoring, trademark abuse detection, complaint templates for Brand Registry, and test buy evidence collection guides. No API key required.◐····●35/40Brand Protection — eBay 🛡️eBay brand protection toolkit. Detect unauthorized sellers, counterfeits, and VeRO violations. Includes price monitoring, trademark abuse detection, VeRO complaint templates, and enforcement guides. No API key required.◐····●35/40Brand Protection — Shopify/DTC 🛡️Shopify/DTC brand protection toolkit. Detect counterfeit stores, unauthorized resellers, and trademark violations. Includes DMCA takedown templates, domain monitoring, and social media infringement detection. No API key required.◐····●35/40Brand Protection — TikTok Shop 🛡️TikTok Shop brand protection toolkit. Detect unauthorized sellers, counterfeit products, and affiliate abuse. Includes TikTok IP Protection reporting, influencer misuse detection, and complaint templates. No API key required.◐····●35/40