Accessible Website Design: Ten WCAG Checks Anyone Can Run in an Afternoon

Accessible website design is often presented as a specialist discipline, which puts many small organisations off even starting. Yet the most common problems show up with a few very simple tests that anybody can run. They will not replace a professional audit, but they will tell you quickly whether your site is in reasonable shape. Set aside an afternoon, make a cup of tea, and work through these ten.

Put the mouse away

Try to use the whole site with the keyboard alone. The Tab key should move through links and buttons in a sensible order, Shift and Tab should go back and Enter or Space should activate things. Every focused element needs a visible outline, and WCAG 2.2 strengthened the expectation that the focused item is not hidden behind sticky headers. Watch for keyboard traps, where you cannot leave a pop-up or a menu without a mouse.

Zoom to 200 percent, then narrow the window

Increase the browser zoom to 200 percent and check that nothing overlaps or disappears. Then make the window about 320 pixels wide, or zoom to 400 percent, and confirm that content reflows into one column without sideways scrolling. People with low vision use this daily, and a layout that breaks here is failing a lot of visitors.

Check colour contrast

WCAG level AA asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text and for interface components such as input borders. Free tools let you paste two colours and see the ratio. Pay particular attention to grey text on white, white text on pastel buttons and text over photographs.

Do not rely on colour alone

Look for places where meaning is conveyed only by colour, such as red errors, green success or links distinguished from body text only by hue. Add text, icons or underlines. Convert a screenshot to greyscale and see whether the page still makes sense.

Read the headings

Screen reader users often navigate by headings, so a logical hierarchy matters: one main heading per page, followed by sections and subsections in order. Do not choose heading levels for their size; use styling for that. Skim the list of headings in a browser extension and ask whether it tells a coherent story.

Give images and icons proper names

Meaningful images need a short text alternative describing their purpose, such as "Opening times: Monday to Friday, 8 to 6", while purely decorative ones should have an empty alternative so they are skipped. Buttons with only an icon, such as a magnifying glass or a basket, need an accessible name.

Check forms and error messages

Every field needs a visible, associated label, and errors should be described in text, identifying the field and how to fix it. The Equality Act 2010 expects service providers to make reasonable adjustments, and an inaccessible booking form can be exactly the kind of barrier it is meant to address, though this is not legal advice.

Try a screen reader for ten minutes

Switch on VoiceOver on an Apple device or NVDA on Windows, and listen to your home page and a form. You will hear things sighted users never notice: unlabelled buttons, repeated links named "read more" and decorative elements announced as noise. You will not become an expert in ten minutes, but you will learn a lot.

Pause moving content and check media

Carousels and videos that start automatically should be controllable, and video needs captions. Content that flashes more than three times a second can trigger seizures and should be avoided.

Write down what you found

Where audits and automated tools fit

Automated checkers find perhaps a third to a half of accessibility problems, mostly the mechanical ones such as missing labels and low contrast, and they are worth running regularly. They cannot judge whether alternative text is meaningful, whether the reading order makes sense or whether a custom widget behaves properly with assistive technology. That requires human testing, ideally including disabled users. Use the tools for breadth and people for depth.

Make accessibility a habit, not a project

The cheapest time to fix an accessibility issue is before it is built. Include the checks in design reviews, write accessible components once in your design system and train editors to write meaningful headings, links and alternative text. Re-test after every significant release. Sites that approach it this way rarely face a painful remediation project, and their visitors notice the difference.

Publish an accessibility statement, fix the high-impact issues first and make accessibility part of every future change. If you would like a structured audit and a fix list, we can provide one.