Skip to content
Business

A Website Accessibility Checklist You Can Run Yourself in an Hour

Ten checks you can run on your own site this afternoon with no tools to buy. It will not make you conformant, but it will tell you fast whether you have a small problem or a large one.

Share

You do not need to hire anyone to find out roughly where you stand. Most accessibility failures are not subtle, and you can catch a good share of them yourself in an afternoon with nothing but the browser you already have open.

Two honest expectations before you start. This will not make your site conformant and it is not an audit. What it will do is tell you quickly whether you have a tidy site with a few gaps or a genuine problem, which is the thing most owners actually want to know before spending money.

Work through it on your three most important pages: your home page, your main service or product page, and whatever page people use to contact or pay you. That last one matters most. An inaccessible checkout is a customer who cannot buy.

1. Unplug your mouse

This is the single most revealing test and it costs nothing. Physically set the mouse aside and try to use your site with the Tab key, Shift and Tab to go backwards, Enter and Space to activate things.

Ask yourself: can I reach every link, button and form field? Can I open the menu? Can I complete the contact form and submit it? If you cannot buy your own product without a mouse, neither can a large number of people with motor or vision disabilities.

2. Watch for where the focus goes

While you are tabbing, keep your eye on what is highlighted. There should always be a clearly visible indicator, an outline or ring, showing where you are.

Two failures to watch for. If the indicator vanishes entirely, someone removed it in the CSS to make the design look tidier, which is one of the most common self-inflicted accessibility wounds there is. And if a sticky header or a cookie banner is sitting on top of the thing you just tabbed to, that is its own failure under WCAG 2.2.

3. Try to escape

Open every popup your site has: the newsletter modal, the cookie notice, the image lightbox, the mobile menu. Now try to get out using only the keyboard, with the Escape key or by tabbing.

If you get stuck cycling inside a component with no way back to the page, you have found a keyboard trap. These are considered serious, and they turn up constantly in demand letters.

4. Click your form labels

Go to your contact form and click directly on the word “Email,” not the box. If the cursor jumps into the field, the label is properly associated with the input. If nothing happens, it probably is not, which means a screen reader may announce that field as nothing at all.

Also check whether your fields have real labels or only placeholder text inside them. Placeholder-only fields disappear the moment someone starts typing, which is a problem for everybody and a bigger one for people with memory or attention difficulties.

5. Submit the form wrong on purpose

Leave a required field empty, or type a deliberately broken email address, and submit.

A good error message names the field and says what to do: “Email address must include an @ symbol.” A bad one turns the box red and says “Error.” If your form communicates the problem only by color, someone who cannot distinguish that color has no idea what went wrong.

6. Check your images for alt text

In WordPress this is easy: open your Media Library and look at the alt text field on your recent images. A large number of sites have it blank on everything.

The rule is about purpose, not description. If an image carries information, the alt text has to carry the same information. If it is purely decorative, it should have empty alt text so a screen reader skips it rather than reading out “DSC underscore 4471 dot jpg.” The worst case is text baked into an image, like a pricing graphic or a hours-of-operation poster, where the alt text has to reproduce all of it.

7. Measure your contrast, do not eyeball it

Contrast is a measured ratio, not a matter of taste. Normal-size text needs 4.5 to 1 against its background to meet AA; large text needs 3 to 1.

Search for any free online contrast checker, drop in your text color and background color, and read the result. The usual offenders are light gray body text on white, which designers love, and white text sitting on top of a photograph or a pale brand color. Check your buttons too.

8. Zoom to 200 percent

Hold Ctrl and press plus, or Command and plus on a Mac, until you are at 200 percent. Then read the page.

Content should reflow and stay usable. What you are looking for is text running off the edge, columns overlapping, a menu that becomes unreachable, or content trapped in a box you now have to scroll sideways to read. Plenty of people browse permanently zoomed in, and it costs them nothing to leave your site for one that works.

9. Hunt for information carried by color alone

Look for anywhere your site says something using only color. Required fields marked only in red. A chart whose legend depends on distinguishing green from red. Availability shown as a colored dot with no label.

Around one in twelve men has some form of color vision deficiency. The fix is almost always trivial: add text, a symbol or a pattern alongside the color, and keep the color too.

Screen reader users often pull up a list of every link on a page and move through it. In that list there is no surrounding sentence to give a link meaning.

So a page with nine links all reading “Read more” or “Click here” becomes useless. Write link text that makes sense alone: “Read more about our maintenance plan.” As a bonus, this is also better for search engines, which read link text as a signal about the destination.

A free tool worth running, with a caveat

Once you have done the manual checks, run a free automated scanner over the same pages. WAVE, axe DevTools and the accessibility section of Chrome’s built-in Lighthouse report are all free and all reasonable.

The caveat is the important part. Automated tools catch only a portion of real accessibility problems, somewhere between a quarter and a half depending on which study you read and how the site is built. They are very good at the mechanical questions, like whether an alt attribute exists. They cannot tell you whether the alt text is right, whether the reading order makes sense, or whether your custom dropdown behaves properly for a screen reader.

This is why a green score from a scanner is not a conformance claim, and why I get suspicious when a vendor’s entire evidence is a screenshot of one.

What your results mean

If you found nothing: good, and check again after your next redesign or plugin update. Accessibility drifts. New content reintroduces problems, which is why it belongs in a maintenance routine rather than a one-time project.

If you found two or three things: these are usually quick, cheap fixes. Get them done before they turn into correspondence.

If you could not use your own site without a mouse: that is a structural problem rather than a list of small ones, and it will not be solved by tweaking settings. It needs work in the code.

Whatever you do, resist the urge to answer this with a widget. I go through why at length in why overlay widgets don’t make your site compliant, including what the Federal Trade Commission had to say about the largest vendor in that market.

If you want the standard behind all ten of these checks, that is WCAG 2.2 AA explained. For the legal backdrop, start with ADA website compliance, what it actually means. And when you want a real measurement instead of a spot check, here is what happens during an accessibility audit, or book a free 30-minute call and tell me what you found.

FREE ESTIMATE

Thinking About a Project?

Free quote, scope and price locked up front, fully owned at launch.

Estimate Your Cost