PixelPlan

25. August 2026 · Accessibility

Accessible website: a checklist you can test yourself

A checklist you can work through without testing software — grouped by how you test, not by clause number. Open a browser, put your phone next to it, set aside an hour. Every item tells you what to check, how to check it, and why it also affects customers without a disability.

Accessible website: a checklist you can test yourselfAccessibility

Most checklists on this subject are ordered by the rulebook: success criterion 1.4.3, level AA, followed by a sentence you only understand if you already knew it. That helps with proving compliance. It does not help with looking.

This list is ordered differently: by how you test. Everything you find with the keyboard sits together. Everything you find with your eyes sits together. You need no testing software, no browser extension and no prior knowledge — a computer, a phone and roughly an hour.

How to work through this list

Do not check the whole website. Check one representative of each kind of page: the home page, one service page, one blog post, the contact page and, if you have them, a product page and the checkout. What is broken on one service page is broken on all of them, because they come from the same template.

Write down every finding with the page and the place, rather than fixing things as you go. A list of twelve concrete lines is a work order any agency can act on. “The site is not accessible” is not. The six blocks are:

  • Keyboard-only operation — the longest block, and the one that finds the most
  • Contrast and text size — done with your eyes, ideally outdoors
  • Structure and headings — done by skimming the page rather than reading it
  • Images and alt text — an inventory, not a measurement
  • Forms and error messages — the block that directly costs you enquiries
  • Media and motion — video, carousels, animation

1. Keyboard-only operation

Push the mouse out of reach. Not to one side — out of reach, or within five minutes you will reach for it without noticing. You need Tab to move forward, Shift plus Tab to go back, Enter and the space bar to activate, the arrow keys inside select lists, and Escape to close things.

  1. Reload the home page and press Tab once. Does a skip link appear first, something like “Skip to content”? It is not compulsory, but without it you tab through the entire menu on every sub-page before you reach the text
  2. If a cookie banner appears: can you reach “Reject” with the keyboard, and is it as close to hand as “Accept all”? Can you get past the banner at all without clicking?
  3. Tab through the header and look at the screen at every step. Deliberately look away and back again: can you find where you are within a second? A barely visible change of colour does not do that job
  4. Sub-menus: do they open from the keyboard, can you reach the items inside, and do they close again — with Escape, or by tabbing onward?
  5. Watch the order. Does the focus follow what you see, or does it jump from mid-page into the footer and back?
  6. Watch for dead runs: do you press Tab several times with nothing visibly moving? Then the focus is sitting inside something hidden — a closed menu, a hidden slider. For someone without a mouse that is a dead end
  7. Open a pop-up or an image gallery. Does the focus land inside it, stay inside it, and come back out with Escape? And does it then return to where you were, rather than to the top of the page?
  8. Check everything that looks like a control but is not one: accordions, tabs, filters, star ratings, quantity plus-and-minus buttons. Do they respond to Enter and to the space bar?
  9. Carousels and sliders: can you reach all the content, including the slides not currently on screen?
  10. Go to the contact form. Field by field, select lists with the arrow keys, the date field without clicking a calendar, the privacy consent checkbox with the space bar
  11. Actually submit the form once. Where does the focus go afterwards? Do you learn that it worked without scrolling?
  12. Repeat the round once on a sub-page, and once on your phone with an attached keyboard if you have one

Two findings are by far the most common: a focus indicator the design made invisible “because it looked untidy”, and an overlay you cannot get out of without a mouse. Both are comparatively quick to fix — provided somebody knows they are there.

This is not only about people who cannot use a mouse. It affects anyone whose trackpad has just given up, anyone filling a form at speed from the keyboard, and anyone viewing your site through a remote control or a car display.

2. Contrast and text size

This is the quickest block and the one taken least seriously, because the problem never shows up on your own screen in a dimmed office.

  • Take your phone outside and read your body text in daylight. Light grey on white fails here immediately
  • Take a screenshot and look at it in greyscale — on the phone via a black-and-white filter, on the computer via the print preview set to greyscale. Whatever disappears was only distinguishable by colour
  • Text over photos and gradients is the hardest case, because the contrast changes from one part of the image to the next. Judge it by the lightest patch behind the text, not by the average
  • Are links in body text recognisable without colour — underlined, or clearly set apart?
  • Placeholder text in form fields is almost always too light. It is also frequently the only label the field has — more on that in block 5
  • On your phone, pinch to zoom in on the page. If nothing happens, zooming has been disabled. That is a setting somebody actively chose, and it can be reversed
  • On the computer, enlarge only the text rather than the whole page (your browser has an option to zoom text only) and set it to 200 per cent. Whole-page zoom almost always looks fine; only text-only zoom shows whether the layout grows with it or the text gets cut off
  • Check long passages set in capitals and very thin weights. Both are design choices that cost legibility, and neither is ever noticeable in the design file

Contrast has the widest benefit of anything on this list. It helps people with limited vision, but equally anyone looking at a phone outdoors in summer, anyone over 45 without reading glasses, and anyone on a five-year-old monitor.

3. Structure and headings

Structure is invisible as long as everything works, which is why it is the block people skip. You test it by skimming the page rather than reading it — exactly what a screen reader does, and, as it happens, exactly what a search engine does.

  • Read only the headings, top to bottom. Do they add up to a sensible table of contents? If not, sub-headings are missing or they say nothing
  • Is there exactly one main heading, and is it the subject of the page rather than the company name?
  • Open the browser’s reader view (built into Safari and Firefox). If content is missing, arrives in the wrong order, or reader view cannot be switched on at all, the structure is not properly marked up — it has only been made bigger and bolder
  • Read all the link texts on a page one after another, without the sentences around them. Eight instances of “Learn more” is a list without information — for screen reader users, who navigate exactly like that, and for everyone who skims
  • Compare the browser tab titles of several sub-pages. Are they different, and do they say where you are?
  • Are tables real tables with a header row, or pictures of tables?
  • Check whether the browser offers to translate the page even though it is already in your language. That is a sign the page language is set incorrectly — which also ruins the pronunciation in a screen reader

The side effect is why this block always pays: a clean heading structure and meaningful link text are precisely what search engines evaluate. You are working on two things at once here.

4. Images and alt text

Alt text is invisible, so this block cannot be checked by looking. There are still two routes without extra software: switch images off for this site in your browser settings and reload — what is stored then appears on screen. Or go through the images by content.

  • For every image, ask: does it carry information that is not also in the text? Only then does it need a description
  • Purely decorative images need no alt text — an empty one is correct here. What is wrong is the file name: having “IMG-4471” read aloud is worse than silence
  • Try to select text inside images with your mouse. If you cannot, that text does not exist for screen readers, for Google or for translation
  • The most common and most expensive instance of this: opening hours, price lists and menus as a graphic or a scanned PDF. Those are the details people search for most, and precisely the ones nobody can copy
  • Buttons that show only a symbol — magnifier, hamburger menu, telephone handset, basket — need a stored name, otherwise they are read out simply as “button”
  • For charts and infographics: does the key message appear once as a sentence in the body text? That is a better solution than a 200-character alt text anyway
  • Captions do not replace alt text, and alt text does not replace a caption. They do different jobs

5. Forms and error messages

This is the only block where every finding converts straight into money, because this is where your enquiries live. A form with three fields gets filled in; one with twelve does not — and a form that merely glows red after submission, without saying why, does not get a second attempt.

  • Click the label rather than the field. Does the cursor jump into the field? If not, the label and the field are not technically connected — and the tap target is needlessly small on a phone
  • Start typing: does the label disappear? Then it was a placeholder, and it was the only one. Anyone interrupted while filling in the form no longer knows what belongs in which field
  • Are required fields marked in words, and not only by a coloured asterisk?
  • Before you type, does it say which format is expected — a phone number with or without the dialling code, a date in which notation?
  • Submit the form once while empty. Does the message say which field is meant and what is missing, or just “error”? Does it sit next to the field, or only at the very top, out of view?
  • Is the error recognisable without colour? A red-outlined field with no text is an empty message for anyone with red-green colour blindness
  • Is what you already typed still there after the error? An emptied form is the point at which people give up
  • Alongside a captcha, is there a second way to reach you — a phone number or an email address that is written out, not hidden in an image?
  • After submission, is the confirmation actual text rather than only a green tick, and is it visible without scrolling?

Run this block once on your phone, one-handed, out and about, in a hurry. That is the situation most of your enquiries are actually written in — and the fastest way to judge a form.

6. Media and motion

The last block covers everything that moves by itself. It is short, but it contains the two things visitors most often resent without ever telling you: sound they did not ask for, and content that moves on before they have finished reading it.

  • Does a video start automatically with sound anywhere? That is the most reliable way to drive somebody out of an open-plan office instantly
  • Watch your videos once with the sound off. Do you understand them? People watching on the train or over lunch watch with the sound off — captions are not an edge case here, they are the normal case
  • Is there a transcript for longer videos or podcasts? Incidentally it is the only part of a video a search engine can read
  • Does a carousel advance on its own? If so: can it be paused, and is there enough time to finish reading a slide? Do not judge that by your own copy, which you know by heart
  • Switch on “reduce motion” in the system settings of your computer or phone and reload the page. If nothing changes, your website is ignoring that request — even though the operating system passes it on explicitly
  • Are there elements that blink or flash rapidly? This is the only item on the list that is an acute health risk, and the only one to switch off immediately
  • Can the video player be operated from the keyboard — play, pause, volume?

Heavy scroll-driven motion, often called parallax, causes genuine dizziness in a proportion of visitors. You never see it in your figures, because those people simply close the page — one bounce looks like any other.

The checklist at a glance

To print out or tick off. The third column is the one that helps most in meetings: nearly every item improves the site for visitors nobody thinks about when accessibility comes up.

Summary of every check in this article. Per row: the check, how to test it in a browser or on a phone without extra software, and which other visitors it benefits.
What you checkHow you test itWho else it helps
Visible focusPress Tab, look away, look back — can you find your place again?Anyone who fills in forms from the keyboard instead of clicking
A way out of menus and pop-upsOpen the overlay, press Escape, keep tabbingAnyone whose trackpad or mouse has just stopped cooperating
Contrast of body textYour phone outdoors in daylight; view a screenshot in greyscaleEveryone in sunlight, on old screens, and without reading glasses
Zooming on a phonePinch to zoom — does anything happen?Everyone who wants a closer look at something, such as a house number
Text zoom at 200 per centEnlarge only the text in the browser, not the whole pageEveryone on a small display, because the same line breaks apply
Heading structureRead only the headings; open the browser’s reader viewSearch engines, and everyone who skims rather than reads
Meaningful link textRead all link texts in sequence, without the sentences around themAnyone scanning a page for the one link they came for
Text inside imagesTry to select it with the mouseGoogle search, copying an address, and any translation
Label attached to the fieldClick the label instead of the fieldEveryone on a phone — the tap target becomes much larger
Understandable error messagesSubmit the form once empty and once filled in incorrectlyAnyone who would otherwise give up rather than ask
Captions and transcriptsWatch the video once with the sound offEveryone on a train, in an office, or beside a sleeping child
Motion that runs by itselfSwitch on “reduce motion” in system settings and reloadPeople it makes dizzy, and underpowered devices

What to do with the results

You will find more than you can fix in an afternoon. That is normal and no reason to put the list away. Work in this order, sorted by harm rather than by effort:

  1. Anything that blinks or flashes rapidly. Immediately, regardless of everything else
  2. Anything blocking a purchase or an enquiry: form errors without an explanation, overlays with no way out, zooming disabled
  3. Contrast in body text and buttons. Usually a change to a handful of colour values that takes effect across the whole site at once
  4. Visible focus and tab order. Solved once in the template, solved everywhere
  5. Heading structure and link text. The effort is editorial; the effect shows up in search as well
  6. Alt text, and getting text out of images. Best done alongside a revision you were making anyway

And one note that will save you some frustration: a portion of your findings will come not from your content but from the template you use, from a plugin, or from the site builder itself. You recognise those because the same fault appears identically on every page. They belong on the list for your next relaunch, not on tomorrow’s to-do list.

Common questions about the checklist

Six blocks cover most of it: keyboard-only operation, contrast and text size, heading structure, images and alt text, forms and error messages, and media and motion. Grouped by how you test rather than by rulebook, the list can be worked through in a morning. Check one representative of each kind of page, not every single page.

Not for this list. A browser, a phone and a keyboard are enough. Automated tools reliably find contrast values and missing alt text, but they cannot judge whether an alt text describes the image or whether the tab order makes sense. That part stays human judgement, and it is the larger part.

For a site of five to ten pages, allow an hour to an hour and a half. The keyboard round is the longest part, at roughly fifteen minutes per page template. Contrast, structure and media go quickly afterwards, because you are only spot-checking.

First anything that flashes, then anything blocking an enquiry or a purchase, then contrast, then focus and keyboard operation, then structure and alt text. Sort by harm, not by effort. Items that sit in the page template take effect across the entire site after a single correction.

You can spot those because the same fault appears identically on every page. Some of it can be changed in the theme settings, colours and text sizes in particular. Focus outlines, keyboard operation of menus and the underlying heading structure, however, often sit in the builder itself — which makes them a topic for the next relaunch rather than something you can solve through content.

Free consultation

We look at your website up front and show you the biggest levers for more enquiries.

Let’s talk

Start your project.

Tell us what you have in mind — we will get back to you personally with the next steps.

or +49 1590 8141993
Project type (optional)
Budget (optional)

A reply straight from the developer.