Is my web page accessible?

Accessibility means a page works for people who can’t see it well, can’t tell some colours apart, or can’t use a mouse. Automatic checks catch a share of the problems; the rest need you to look and try. These tools cover both, on HTML and screenshots you paste in. Nothing is uploaded.

1. Run the automatic checks

In the browser, view the page’s source (or copy the rendered HTML from the developer tools) and paste it into the Accessibility Check. Paste from <html> so the page’s title, language and landmarks are checked too. Problems are listed worst first, each with a link to an explanation. Below them:

• Headings as an outline, with skipped levels marked. Screen reader users move around a page by its headings.
• Links whose text doesn’t say where they go, such as “click here”.
• Pictures with their text alternatives. Missing ones are found; whether the text makes sense is for you to judge.

2. Check the colours

For each pair of text and background colours, type both into the Contrast Checker. WCAG 2’s AA level asks for a ratio of 4.5:1 for normal text and 3:1 for large text, icons and borders. If a pair fails, Nearest passing text colours gives the closest colour of the same hue that passes, ready to copy into your CSS.

3. Look at it as others see it

Take a screenshot and drop it on the Colour Blindness Simulator. Check that nothing relies on colour alone: red and green status lights, a chart’s lines, links that differ from text only in colour, or a required field marked only in red. If two things look the same in the protanopia or deuteranopia view, add a label, an icon or a pattern.

4. Try it without a mouse

Paste the HTML into Keyboard Focus Order and press Show the order. Each place the Tab key stops gets a number, so you can see whether the order follows the page. It also lists:

• Stops with no name, which a screen reader announces only as “button” or “link”.
• A tabindex above 0, which pulls something ahead of everything else.
• Things that react to a click but can’t be reached by keyboard, such as a <div> with an onclick.

Then press Tab through the real page yourself, and check you can always see where the focus is.