accessibility-fundamentalslisted

# Accessibility Fundamentals Review > "Accessibility is not a feature, it's a requirement. If 15% of users can't use your app, you've failed 15% of users." ## When to Apply Activate this skill when: - Reviewing JSX with buttons, links, or forms - Seeing custom interactive components - Forms with inputs and labels - Navigation menus - Modal dialogs - Any user interaction code --- ## The Accessibility Checklist ### Must Have (Every Interactive Element) - [ ] **Keyboard accessible** — All actions work with Tab + Enter/Space - [ ] **Focus visible** — Clear visual indicator of focused element - [ ] **Semantic elements** — `<button>` not `<div onClick>` - [ ] **Form labels** — Every input has an associated `<label>` - [ ] **Alt text** — Images have descriptive alt attributes - [ ] **Sufficient contrast** — Text readable against background (4.5:1 ratio) ### Should Have (Complex Interactions) - [ ] **ARIA labels** — Icon-only buttons have `aria-label` - [ ] **Focus trapping** — Modals trap focus until closed - [ ] **Skip links** — "Skip to main content" for keyboard users - [ ] **Live regions** — Dynamic content announced to screen readers - [ ] **Error messages** — Linked to inputs with `aria-describedby` ### Never Do - [ ] **Rely on color alone** — Color should not be the only indicator - [ ] **Remove focus outlines** — Never `outline: none` without replacement - [ ] **Use divs for buttons** — Use semantic `<button>` or `<a>` - [ ] **Trap users** — Always provide escape