---
name: a11y-checklist
description: The accessibility checks that catch most real failures, and the ones automated tools cannot make for you.
when_to_use: You are designing or testing a UI component or screen.
tags: [frontend, accessibility]
---

# Automated checks find about a third

Run axe, then do the four manual checks it cannot do. A clean axe report on an
unusable interface is the normal outcome, not a rare one.

## The four manual checks

1. **Tab through it.** Every interactive element reachable, in a sensible order,
   with a visible focus ring. If focus disappears into an offscreen element or a
   closed menu, the page is unusable by keyboard — the single most common real
   failure.
2. **Operate it without a mouse.** Open the menu, pick an item, close it with
   Escape. Dialogs trap focus while open and return it to the trigger on close.
3. **Zoom to 200%.** Text reflows, nothing is clipped, nothing overlaps. This is
   also the fastest way to find fixed-height containers that will break on a
   phone.
4. **Read it with a screen reader once.** VoiceOver on macOS, NVDA on Windows.
   Five minutes on the main flow finds unlabelled buttons and images whose alt
   text reads as a filename.

## What axe does catch

Colour contrast, missing form labels, missing alt attributes, ARIA misuse,
duplicate ids, heading-level jumps. Run it in CI — these regress constantly and
are cheap to fix at the point of change.

## The rules that prevent most issues

- **A button is a `<button>`.** A clickable `<div>` needs role, tabindex and
  key handlers to be equivalent, and will get at least one of them wrong.
- **Every input has a `<label>`** with `for`, not just a placeholder. A
  placeholder disappears on focus, which is when it was needed.
- **Never remove the focus outline without replacing it.** `outline: none` with
  no substitute makes keyboard use impossible. Style it instead.
- **Icon-only buttons need an accessible name** — `aria-label`. Otherwise the
  screen reader announces "button".
- **Don't announce with colour alone.** A red border with no text says nothing
  to a colourblind user or a screen reader.

## Motion

Honour `prefers-reduced-motion`. Vestibular disorders are common and large
parallax or transform animations genuinely make people ill. One media query
disables the offending animations.