DIY Accessibility Audit: Test Your Site in One Afternoon

What you need for a three-hour audit

Accessibility is not a nice-to-have for UK businesses. The Equality Act 2010 expects service providers to make reasonable adjustments for disabled people, and that includes websites. Beyond the legal position, accessible sites are simply better sites: clearer headings, properly labelled forms and readable contrast help every visitor, and search engines reward the same structure. The benchmark to aim for is WCAG 2.2 level AA.

A professional audit is thorough, but you can find most of the serious barriers yourself in an afternoon. Gather this free kit before you start:

• Chrome or Edge, with the WAVE and axe DevTools extensions installed
• Lighthouse, already built into Chrome DevTools
• The WebAIM contrast checker (a free web page)
• NVDA, a free screen reader for Windows, or VoiceOver, built into every Mac
• A spreadsheet with columns for page, issue, severity and fix owner

Choose five pages to audit: your homepage, a key service or product page, your contact or booking form, your checkout if you sell online, and one blog post.

Hour one: run the automated scanners

Start with Lighthouse: open DevTools, choose the Lighthouse tab, tick Accessibility and run it against each of your five pages. Then click the WAVE extension on the same pages for a visual overlay of errors, and run axe DevTools for a tidy, exportable issue list. Between them they will surface the classics:

• Images with missing or useless alt text
• Form fields without programmatic labels
• Text that fails contrast requirements against its background
• Skipped heading levels (an h4 straight after an h1)
• Empty links and buttons that announce nothing
• A missing language attribute on the page

Log everything in the spreadsheet, one row per issue per page. One caution: automated tools catch well under half of real-world barriers, so treat a clean scan as a floor, not a certificate. The manual tests in the next two hours are where the important findings come from.

Hour two: put the mouse in a drawer

Many people with motor impairments, and plenty of power users, navigate entirely by keyboard. Unplug or ignore your mouse and complete your main customer journey, from homepage to submitted enquiry or completed checkout, using only Tab, Shift+Tab, Enter, Space, Escape and the arrow keys. Check each of these as you go:

• Tab reaches every interactive element, in an order that matches the visual layout
• You can always see where you are: a visible focus outline never disappears
• Enter and Space actually activate links and buttons
• Menus, accordions and pop-up dialogs open, operate and close (Escape) without a mouse
• Nothing traps you: you can Tab out of embedded maps, videos and chat widgets
• A skip link lets you jump past the navigation straight to the main content

The most common failure is an invisible focus state, usually because a designer removed the outline for looking untidy. If you lose track of where you are within ten seconds, so will your customers.

Still hour two: contrast, zoom and motion

Take your brand colours to the WebAIM contrast checker. Body text needs a ratio of at least 4.5:1 against its background, and large text at least 3:1. Pale grey placeholder text and white text on brand pastels are repeat offenders.

Next, zoom. Press Ctrl and plus until the browser reports 200%: text should reflow without horizontal scrolling, overlaps or clipped buttons. Then use responsive mode in DevTools to view the site at 320 pixels wide, which is the reflow test WCAG expects.

Finally, motion. Any carousel or autoplaying video needs a visible pause control, and heavy animation should respect the operating system's reduced-motion setting. If your homepage hero moves and cannot be stopped, log it.

Hour three: test with a real screen reader

Download NVDA from NV Access (it is free) or turn on VoiceOver on a Mac. Give yourself fifteen minutes to learn the basics: in NVDA, H jumps to the next heading, K to the next link, F to the next form field, and the arrow keys read line by line. Then repeat the same money journey you did by keyboard, listening rather than looking.

• Do the headings, read in sequence, form a sensible outline of the page?
• Are images announced meaningfully, or do you hear filenames like IMG-4021?
• Do links make sense out of context, or is everything "click here" and "read more"?
• Does each form field announce its label, and are error messages read out when validation fails?
• Are icon-only buttons (search, basket, close) announced with a proper name?

This hour is uncomfortable the first time, and that discomfort is the point: it is the closest you will get to experiencing your site as a blind customer does.

Turn three hours of notes into a fix list

Now triage the spreadsheet. Tag each row as a blocker (stops someone completing a purchase or enquiry), major (a significant barrier with a workaround) or minor (an irritation). Fix blockers on your money pages first, then majors, then sweep the minors during routine maintenance.

The encouraging news is that many fixes are content-level rather than technical: writing alt text, renaming vague links, darkening a grey, adding labels. A developer is usually only needed for focus management, dialogs and custom components. Retest after every redesign and at least twice a year, and if you supply public sector clients, note that their stricter accessibility regulations may flow down to you. If your list ends up longer than an afternoon can absorb, our team can help you work through it.