How to improve frontend accessibility

Accessibility work has a strongly skewed payoff curve. A handful of changes fix most of what actually blocks people; the long tail is real but far less urgent. This is the order worth working in.

1. Restore the focus indicator

The most common serious defect on the web, and the easiest to fix. Someone removed the default outline because it looked untidy, and never replaced it. A keyboard user now cannot tell where they are.

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

`:focus-visible` rather than `:focus` gives keyboard users the indicator without putting a ring on every mouse click — which is the reason it was removed in the first place.

2. Label every input

A placeholder is not a label. It disappears when typing starts, fails contrast in most designs, and is not reliably announced.

<label htmlFor="email">Email</label>
<input id="email" name="email" type="email" autoComplete="email" />

3. Fix the heading outline

One `h1` per page, and no skipped levels. Screen reader users navigate by heading far more than by reading linearly; a broken outline is a broken table of contents.

4. Write real link text

Links are often read out of context, as a list. "Read more" repeated eleven times is a list of eleven identical destinations.

5. Stop using colour alone

Roughly one man in twelve has a colour vision deficiency. A red border with no message, or a green dot with no label, carries no information for them. Every status needs a word.

6. Respect reduced motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

7. Manage focus in dialogs

1. Move focus into the dialog when it opens.
2. Trap it while open.
3. Close on Escape.
4. Return focus to the element that opened it.

What automated tools will not tell you

Roughly a third of real issues are machine-detectable. Nothing automated can tell you that your alt text describes the wrong thing, that the tab order contradicts the layout, or that your error message is unhelpful. Tab through the page yourself; it takes two minutes.