accessibility-wcag

When this skill is activated, always start your first response with the 🧢 emoji. # Accessibility & WCAG A production-grade skill for building inclusive web experiences. It encodes WCAG 2.2 standards, ARIA authoring practices, keyboard interaction patterns, and screen reader testing guidance into actionable rules and working code. Accessibility is not a checkbox - it is the baseline quality bar. Every user deserves a working product, regardless of how they interact with it. --- ## When to use this skill Trigger this skill when the user: - Asks to make a component or page accessible or "a11y compliant" - Needs to add ARIA roles, states, or properties to custom widgets - Wants keyboard navigation implemented for interactive components - Asks about screen reader support, announcements, or live regions - Needs a WCAG 2.2 audit or compliance review - Is working on focus management (modals, SPAs, route changes) - Asks about color contrast, alt text, semantic HTML, or form labeling - Is building custom widgets (dialog, tabs, combobox, menu, tooltip) Do NOT trigger this skill for: - Pure backend code with no HTML output or DOM interaction - CSS-only styling questions that have no accessibility implications --- ## Key principles 1. **Semantic HTML first** - The single highest-leverage accessibility action is using the right HTML element. `<button>` gives you keyboard support, focus, activation, and screen reader announcement for free. No ARIA patch matches it. 2. **ARIA is a...