Accessibility Check

What it's for

Find accessibility problems in a web page or a piece of HTML: pictures without descriptions, buttons and fields without names, broken ARIA, low colour contrast and more. It uses axe, the open-source engine behind many accessibility testing tools, and adds lists of the page’s headings, links and pictures for checking by eye.

For example, before handing over an e-mail template or a page of course content, paste its HTML here to catch the problems that stop screen reader and keyboard users.

How to use it

Paste HTML, or choose an .html file (or drop it on the page), and press Check. The page is shown below as it was checked. Problems are listed worst first, each with the elements affected and a link to axe’s explanation.

Then come the headings as an outline (skipped levels are marked), links whose text doesn’t say where they go (“click here”, “read more”), and every picture with its text alternative and a verdict. When you paste part of a page, the checks about the page as a whole (its title, language and landmarks) are left out; paste from <html> to include them.

Example

Press Try an example. The HTML has an <h1> followed by an <h3>, a “Click here” link, an image with no alt, a field with a label that isn’t linked to it, and an empty button.

The message says 4 rules broken, on 4 elements: buttons must have discernible text, images must have alternative text, form elements must have labels (critical), and heading levels should only increase by one (moderate). The heading list notes the skipped level and the link list flags “Click here”.

Good to know

Automatic checks find perhaps a third of accessibility problems; reading order, whether descriptions are any good, and how the page works with a keyboard or screen reader need a person. Scripts in the HTML don’t run, and styles or pictures from other sites don’t load, so contrast is checked as the page looks here. The Keyboard Focus Order tool checks the tab order.