- Web Accessibility (WCAG 2.1 AA)
- Status
-
- Production Ready ✅
- Last Updated
-
- 2026-01-14
- Dependencies
-
- None (framework-agnostic)
- Standards
- WCAG 2.1 Level AA Quick Start (5 Minutes) 1. Semantic HTML Foundation Choose the right element - don't use div for everything:
< div onclick = " submit ( ) "
Submit </ div
< div onclick = " navigate ( ) "
Next page </ div
< button type = " submit "
Submit </ button
< a href = " /next "
Next page </ a
Why this matters: Semantic elements have built-in keyboard support Screen readers announce role automatically Browser provides default accessible behaviors 2. Focus Management Make interactive elements keyboard-accessible: / ❌ WRONG - removes focus outline / button :focus { outline : none ; } / ✅ CORRECT - custom accessible outline / button :focus-visible { outline : 2 px solid var ( --primary ) ; outline-offset : 2 px ; } CRITICAL: Never remove focus outlines without replacement Use :focus-visible to show only on keyboard focus Ensure 3:1 contrast ratio for focus indicators 3. Text Alternatives Every non-text element needs a text alternative:
< img src = " logo.png "
< button
< svg
... </ svg
</ button
< img src = " logo.png " alt = " Company Name "
< button aria-label = " Close dialog "
< svg
... </ svg
</ button
The 5-Step Accessibility Process Step 1: Choose Semantic HTML Decision tree for element selection: Need clickable element? ├─ Navigates to another page? → ├─ Submits form? →