WCAG 2.2 has 87 success criteria. If you are a four-person team shipping weekly, you are not going to work through 87 of anything. Here is the subset that catches most real harm, ordered by how often it goes wrong.
1. Every interactive thing is reachable by keyboard
Put the mouse away. Tab through a complete user journey.
You are checking three things: can you reach every control, can you see which one has focus, and can you get out of everything you get into. A modal you can tab into but not out of is a trap, and it is common.
The usual cause is a div with a click handler. It has no tab stop and no role. Use a button.
2. Every input has a real label
<!-- No. The label is decorative text that happens to sit nearby. -->
<span>Email</span><input type="email">
<!-- Yes. -->
<label for="email">Email</label><input id="email" type="email">
Placeholder text is not a label. It disappears when the user types, which is exactly when they need it.
3. Images say something useful, or nothing at all
- Meaningful image:
altdescribes what it conveys, not what it depicts - Decorative image:
alt=""— empty, present. A missingaltmakes screen readers read the filename - Image of text: put the text in the page instead
4. Contrast is 4.5:1 for body text
AA needs 4.5:1 for normal text and 3:1 for large. The usual failure is muted grey body text — a design-system default nobody revisited. Devtools will tell you in the colour picker.
5. The heading outline makes sense on its own
Screen-reader users navigate by headings the way you skim by eye. One h1, no skipped levels, and heading tags used for structure rather than for font size.
Read your headings in order with nothing else. If they do not describe the page, your outline is broken.
6. Colour is never the only signal
A red border on an invalid field is invisible to a colour-blind user, and to anyone on a washed-out screen in daylight. Add an icon, or text.
7. Focus is visible
If you find outline: none in your CSS with nothing replacing it, that is a WCAG 2.4.7 failure and a keyboard user is now navigating blind.
What this list does not cover
A lot. Live regions, complex widget semantics, reduced motion, cognitive load, and everything requiring judgement about whether your alt text is actually good.
The honest position: this checklist plus an automated audit gets you past the failures that cause the most harm per unit of effort. It does not make you accessible, and anyone who tells you a tool does is selling something.
Automated tools — including ours — catch roughly a third of issues. Run one, then do the keyboard pass yourself.
Top comments (0)