---
name: Accessibility
description: Design for everyone, including future you.
---
# Accessibility (a11y)

Accessibility is not a checklist at the end; it's a property of the design, like performance. Build it in or retrofit painfully.

## Must-haves
- **Semantic HTML.** A `<button>` is keyboard-focusable, announced as a button, and works with Enter/Space — for free. A `<div onclick>` is none of these. Use the right element.
- **Visible focus.** Never remove `:focus-visible` outlines without replacing them. Keyboard users navigate by them.
- **Labels, not placeholders.** A placeholder disappears on input; a label stays. Screen readers rely on associated labels.
- **Alt text on meaningful images; empty alt on decorative ones.** "Logo" is useful; a screen reader saying "decorative swirl" on every page is noise.
- **Test with a keyboard, then a screen reader.** If you can't reach and operate every control without a mouse, neither can many of your users.