Website Accessibility Checklist

Automated scanners catch about a third of accessibility problems, and the easiest third at that. They can tell you an image has no alt; they cannot tell you the alt text says "image1.jpg". This checklist is built around the manual checks that find the rest, ordered by how often they block someone outright.

Start with the keyboard, because it is decisive

Put the mouse away and press Tab through the whole page.

• Can you reach everything interactive? Links, buttons, form fields, menu toggles, modal close buttons.
• Can you see where you are? A visible focus outline at every stop. Removing outlines because they look untidy makes the site unusable for keyboard navigation — style them instead of deleting them.
• Is the order logical? Tab order should follow the visual order. When it does not, something has been positioned with CSS in a way the markup does not reflect.
• Can you escape? A modal or menu that traps focus with no way out ends the visit.

If a control cannot be reached or activated with Tab, Enter and Space, it is not a control — it is a picture of one. That is almost always a <div> with a click handler where a <button> belonged.

Contrast, measured rather than judged

Placeholder text, disabled states and "subtle" grey captions are where sites fail most often. Check colour pairs at the palette stage rather than page by page — the method is in choosing an accessible colour palette.

Never rely on colour alone to carry meaning. A required field marked only in red, or a chart whose series differ only by hue, disappears for a substantial number of people.

Headings describe structure, not size

Screen reader users navigate by heading far more than by scrolling. That makes heading order a navigation feature, not a typographic one.

• One <h1> per page, describing what the page is.
• No skipped levels — <h2> then <h4> leaves a gap that reads as missing content.
• Never choose a level for its font size. Style it with CSS instead; in WordPress, that is what custom CSS is for.

Read the headings alone, in order. They should form a usable outline of the page.

Alt text: describe the job, not the picture

The right alt text depends on why the image is there.

• Informative image — describe what it conveys. "Bar chart: sales doubled between 2024 and 2026."
• Decorative image — use alt="". An empty alt is correct and tells assistive technology to skip it. A missing alt attribute is not the same thing.
• An image that is a link — describe the destination, not the picture.
• Text inside an image — repeat the text. Better still, do not put text in images.

Never start with "image of". The technology already announced that it is an image.

Forms

Every field needs a real <label> associated with its input. Placeholder text is not a label: it disappears the moment typing starts, which is when it is needed most.

• Errors must be described in text, near the field, and say how to fix the problem — not just "invalid".
• Grouped controls, such as radio buttons, need a fieldset and legend.
• Do not disable form submission until every field is touched; it leaves keyboard users unable to discover what is missing.

Motion, media and timing

• Honour prefers-reduced-motion for animation, parallax and autoplaying carousels. For some people, motion causes nausea rather than delight.
• Never autoplay audio.
• Videos need captions; the audio track is not optional content.
• Avoid anything that flashes more than three times a second.

What to do rather than install an overlay

Accessibility overlay widgets promise compliance from one script tag. They cannot deliver it — they sit above markup they cannot rewrite — and they have been the subject of complaints from the disabled users they claim to serve.

Plugins that genuinely help do narrower things: flagging missing alt text, checking contrast in the editor, adding skip links. That distinction is covered in accessibility plugins for WordPress.

Common mistakes

• Removing focus outlines. The single most damaging one-line change a stylesheet can make.
• Using headings for size.
• Placeholder as label.
• Icon-only buttons with no accessible name. An X with no label is not a close button to a screen reader.
• "Click here" as link text. Links read out of context need to make sense alone.
• Testing only with a scanner.

Verify

Run the page through the keyboard alone, top to bottom. Zoom to 200% and confirm nothing is lost or overlapped — the reflow side is in the responsive design checklist. Read the headings as an outline. Then turn on a screen reader and listen to one page; the first five minutes teach more than any report.