Accessibility checks a designer can do in an afternoon

You can find real accessibility problems without starting from a specialist audit. Try the page without a mouse, enlarge the text and submit a form with mistakes in it. Those simple tasks often expose problems that a polished screenshot hides.

An afternoon review is a first pass. It can’t establish WCAG conformance, and automated checks can’t either. What it can do is show you the problems worth fixing and the questions that need deeper testing.

Put the mouse aside

Use Tab and Shift+Tab to move through the page. Activate controls with the keys people expect. Follow a link, open the navigation and use any filter or dialog.

Can you see where focus is? Does the focus order follow a sensible reading sequence? Can you reach every action without landing in hidden content?

Watch for controls built from elements that can’t receive focus, and for links styled to look like buttons. Semantic HTML gives you a good starting point, but it still needs appropriate labels and behaviour. The overlay cases are covered in more depth in Menus that keep focus where it belongs.

Test Escape in modal overlays and check where focus lands after they close. A visible close icon helps only if a keyboard user can reach it and understand what it does.

Inspect contrast in every useful state

For WCAG’s usual AA text criterion, normal text needs a contrast ratio of at least 4.5:1, and large text needs 3:1. There are defined exceptions. Controls and meaningful graphical information have their own non-text requirements.

Check the combinations people actually see, not only the brand palette. Text over a photograph, placeholder copy, selected tabs and disabled styling often behave differently from the main paragraph colour.

Review hover and focus states. A link that fades on focus makes life harder for someone navigating by keyboard, and that person needs the focus state most.

Don’t communicate an error or a selection through colour alone. Pair it with clear text, a state indicator or another appropriate cue.

Enlarge the content

Try text zoom and a narrow viewport. Look for headings clipped by fixed heights, buttons that lose their labels and horizontal scrolling caused by ordinary content.

Some content, such as a genuinely two-dimensional comparison table, needs its own treatment. That’s a reason to handle the table carefully, not a reason to let the whole page overflow.

Test with longer text as well as larger text. A layout that works only with a short placeholder title will struggle with normal editing and translation.

Review forms before they become sales problems

Each input needs an appropriate label. Placeholder text shouldn’t be the only identification, because it disappears as soon as someone starts typing.

Submit an incomplete form. Can you tell what went wrong and how to fix it? Does the error sit next to the affected field? Does focus move to it, or does an announcement help someone find it without searching the whole page?

Check the success feedback too. A form that quietly clears itself may leave a visitor unsure whether their message was sent.

Test with real browser autofill and with the keyboard alone. Date fields and custom selects deserve attention on real phones as well as on desktop.