An accessibility audit, fixed one finding at a time

Situation

An external audit, and a register of 61 findings

The store had commissioned an accessibility audit against WCAG 2.2. The auditor came back with a register of 61 findings: 15 critical, 40 medium and 6 low, each with a page, a component, the behaviour observed and the fix recommended.

Most of it does not show up if you test with a mouse and good eyesight, which is how most stores get tested. Some of what “critical” meant in practice:

• The search box trapped keyboard users. Once in, they could not tab out.
• The cookie banner could not be answered without a mouse.
• Moving to the next checkout step left a screen reader on the previous one.
• The quantity buttons in the basket and on product pages did nothing from a keyboard.
• Closed mega-menu panels were still in the tab order, so keyboard users tabbed through dozens of hidden links.

What we did

One finding, one release, the auditor’s reference on each

The temptation with a list like this is one big “accessibility update”. We did the opposite. Every finding became its own change, tested on our own copy of the store and released on its own, with the auditor’s reference in the release note.

• Keyboard first The search overlay now closes when focus leaves it or on Escape, the mega menu takes closed panels out of the tab order, and the quantity steppers, diagram and video buttons are real buttons.
• Checkout Each step has a proper heading structure, focus moves to the new step when it changes, and a help line sits in the header on every step.
• Forms Labels and error messages are connected to their fields on the contact, ticket, login, registration and password forms, and password managers can fill them again.
• Content and contrast Banner captions stop being headings, carousel arrows and dots have enough contrast, and the breadcrumb trail names the current page.
• Content fixes for the store team Where the fix was in page content rather than code, we prepared the edits so the store’s own team could apply them.

Our own pipeline did the repetitive part, finding every template a pattern appeared in, and a senior developer reviewed and tested each change before it was released.

Result

A retest that could trace every result to a single change

When the auditor retested, 48 findings passed. The rest were in progress at the time of writing, with the remaining work scheduled the same way. The store owner has a record, release by release, that they can show if anyone asks.

Worth checking on your store

Three things to try without a mouse

• Put your mouse aside and use Tab to reach the search box, type something, then try to leave it.
• Open the site on a fresh browser and try to answer the cookie banner with the keyboard alone.
• In the basket, try to change a quantity with the keyboard.

If any of those fail, the audit will find a lot more. We can work through it the same way.