Web design

Website Accessibility Testing Checklist You Can Run Yourself

5 min read
On this page
  1. Before you start
  2. Keyboard-only pass
  3. Zoom, reflow and text spacing
  4. Colour and contrast
  5. Images, video and motion
  6. Structure, titles and links
  7. Forms and error messages
  8. Screen reader spot check
  9. Common questions

A website accessibility testing checklist is a set of hands-on checks you can run on your own site to find barriers for disabled visitors: keyboard use, zoom, contrast, images, structure, forms and a short screen reader test. A checklist can help you find common barriers. It cannot certify a site as meeting any law or standard. This checklist is general information, not legal advice, and part of our website design best practices guide.

How to use this checklist: pick a few key templates and run each group on each one. You need a browser, a keyboard and about an hour per template. Note every problem with the page, the steps to repeat it and a screenshot, then fix the template rather than single pages.

Before you start

For what each check relates to in the standard, read website accessibility and WCAG first. Then set up:

  • Choose the pages to test: home, a service page, a landing page, the contact page and an article.
  • Run an automated checker on each page to catch the obvious issues first.
  • Open each page on a desktop browser and on a phone.
  • Keep a simple log of page, check, problem, steps to repeat and screenshot.

Keyboard-only pass

Put the mouse aside. Many people rely on a keyboard or on tools that act like one, such as switch devices and voice control.

  • Press Tab from the top of the page and reach every link, button and field.
  • Check a skip link or landmarks let you jump past the navigation.
  • Watch that a visible focus indicator appears on every item you reach.
  • Confirm focus moves in a logical order that follows the layout.
  • Check sticky headers, cookie banners and chat widgets never hide the focused item.
  • Open and close menus, dialogs and accordions with Enter, Space and Escape, without getting stuck.

Zoom, reflow and text spacing

Many people with low vision zoom in or change text settings, so layouts need to cope.

  • Zoom the browser to 200 percent and confirm no text is cut off or overlapping.
  • Narrow the window to 320 CSS pixels wide and check content fits without sideways scrolling.
  • Apply larger line, letter and word spacing with a bookmarklet or extension, and check nothing breaks.
  • Rotate a phone between portrait and landscape, and confirm the page works both ways.

Colour and contrast

Low contrast is one of the most common barriers, and it's quick to measure.

  • Measure body text contrast, and check it reaches at least 4.5:1 against its background.
  • Check large headings reach at least 3:1, including text placed over images.
  • Check icons, field borders and focus indicators reach 3:1 against neighbouring colours.
  • Make sure colour is never the only way to show links, errors or required fields.

Images, video and motion

Text alternatives and controls let people get the same information without seeing or hearing it.

  • Give every meaningful image alt text that does the same job as the image.
  • Mark decorative images with an empty alt attribute so screen readers skip them.
  • Replace images of text with real text, except for logos.
  • Add accurate captions to every pre-recorded video with sound.
  • Add pause controls to anything that moves, scrolls or auto-updates for more than five seconds.

Screen reader users often navigate by headings, links and page titles, so these need to make sense on their own.

  • Give each page a unique title that describes its topic.
  • View the heading outline, and check it reads as a sensible summary of the page.
  • Use one H1 per page, and avoid skipping levels in the outline (good practice rather than a WCAG requirement).
  • Read each link out of context, and rewrite any that only say "click here" or "read more".
  • Check the html element declares the page language.
  • Make buttons and links at least 24 by 24 CSS pixels, or space them well apart.

Forms and error messages

Forms are where enquiries happen, so test them carefully. Our guide on how to design a contact form people finish covers the fixes, and landing page conversion best practices covers the pages around them.

  • Click each field label, and confirm it moves focus into the right field.
  • Check every field keeps a visible label after you start typing, not just a placeholder.
  • Submit the form empty, and check each error says what went wrong in text.
  • Confirm error messages suggest how to fix the problem, such as the expected format.
  • Check the success message is announced, not just shown, after a valid submission.
  • Avoid asking for the same details twice within one multi-step form.

Screen reader spot check

You don't need to be an expert to catch the worst problems. Use the free screen reader built into your device: VoiceOver on Apple devices, TalkBack on Android, or NVDA on Windows.

  • Turn on the screen reader, and listen to the page title and first heading.
  • Move through the headings, and check each one announces as a heading.
  • Tab to each button and field, and confirm its name and purpose are announced.
  • Listen to a few images, and check the alt text makes sense in context.
  • Write down anything confusing, then ask an experienced tester to confirm before fixing.

If you'd like help acting on what you find, talk to our in-house web team.

Common questions

Can an automated checker tell me my site is accessible?

No. Automated checkers are useful for finding some problems quickly, such as missing alt attributes or low-contrast text, but they can't judge whether alt text makes sense or whether a page works well with a keyboard. The W3C says no tool alone can determine whether a site meets accessibility standards, and that knowledgeable human evaluation is required.

How often should I run these accessibility checks?

Run the full list on each main template before launch, then again after any redesign, new feature or change of plugin or theme. Between those, a quick keyboard and zoom pass on new pages and campaign landing pages helps catch common regressions. For a definitive evaluation, use an experienced accessibility tester, ideally alongside people with disabilities.

← Back to Web design

Built to be found, designed to convert

Websites designed and developed in-house, SEO foundations built in. Quote within 24 hours.

5.0-star Google rating (24 reviews) · BBB Accredited, A rating