accessibilitylisted

# UI Accessibility (WCAG 2.1) ## Overview This skill guides implementation and review of accessible UI components following **WCAG 2.1 Level AA standards**. Accessibility ensures your interface is usable by everyone—keyboard users, screen reader users, users with low vision, and users with cognitive disabilities. **Core principle:** Semantic HTML first, ARIA last. Keyboard navigation and screen reader support are non-negotiable. --- ## When to Use / When NOT to Use ### ✅ Use This Skill When - Building new UI components (buttons, modals, dropdowns, forms, tabs) - Adding keyboard navigation or focus management - Reviewing code for accessibility violations - Testing with screen readers or keyboard-only - Ensuring color contrast and visual focus indicators - Adding ARIA attributes to dynamic content ### ❌ Do NOT Use When - Component is purely decorative (no interaction needed) - Audience explicitly doesn't include users with accessibility needs (internally impossible—always assume diverse users) - You're skipping automated testing due to time constraints (violates DoD) --- ## Core Concepts ### 1. Semantic HTML Structure **Foundation:** Use meaningful HTML elements to convey structure and purpose. ```html <!-- ✅ CORRECT: Semantic structure --> <header role="banner"> <nav aria-label="Main navigation"> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> </header> <main id="main-content"> <article> <h1>P