# Accessibility Rules

## Semantics first

1. **Use the element that means what you mean.** A `button` for an action, an `a[href]`
   for navigation, `input` for input. Every native element brings keyboard behavior,
   focus handling and a role for free.
2. **Never put a click handler on a div or span.** It is unreachable by keyboard and
   invisible to assistive technology. If you catch yourself adding `tabindex`, `role`
   and `onKeyDown` to a div, you wanted a button.
3. **ARIA is a last resort, not a garnish.** The first rule of ARIA is not to use ARIA.
   A wrong role is worse than no role, because it overrides what was correct.
4. **Headings describe structure, not size.** One `h1` per page, no skipped levels.
   Use CSS for the size you want.

## Names

5. **Every control needs an accessible name.** A `label` tied to the input by `for`, or
   `aria-label` where no visible label exists.
6. **Icon-only buttons need a name.** An SVG is not a name. Add `aria-label` and mark
   the icon `aria-hidden="true"`.
7. **Link text must make sense alone.** Screen reader users navigate by a list of
   links; "click here" and "read more" are useless in that list.
8. **Every meaningful image needs alt text describing its content.** Every decorative
   image needs `alt=""`, not a missing alt.

## Keyboard

9. **Everything doable with a mouse must be doable with a keyboard.** Tab to it, Enter
   or Space to activate it, Escape to dismiss it.
10. **Never remove the focus outline without replacing it.** `outline: none` with no
    replacement makes the page unusable for keyboard users. A visible, high-contrast
    focus style is not optional.
11. **Tab order follows visual order.** Do not reorder with positive `tabindex`. Fix the
    DOM order instead.
12. **Trap focus inside a modal while it is open**, restore it to the trigger on close.

## Visual

13. **Text contrast is at least 4.5:1**, or 3:1 for large text. Check it, do not
    estimate it. Placeholder and disabled text are the usual failures.
14. **Never use color as the only signal.** Pair it with text, an icon, or a pattern.
15. **The interface must work at 200% zoom** and at 320px wide without horizontal
    scrolling.
16. **Respect `prefers-reduced-motion`.** Disable non-essential animation when it is set.

## Dynamic content

17. **Announce important changes** with a live region. A result that appears silently
    does not exist for a screen reader user.
18. **Move focus deliberately** after a navigation or a modal opens, so the next Tab
    lands somewhere sensible.
19. **Form errors are associated with their field** by `aria-describedby`, and are text,
    not just a red border.