What We Found Auditing UK E-Commerce Sites

Over the past year, we have audited 30 UK e-commerce sites against WCAG 2.2 AA. The results were worse than we expected, and the same issues kept appearing across sites of every size, from independent retailers to household names.

Here is what we found, broken down by how frequently each issue appeared and why it matters for your customers and your revenue.

Keyboard traps in checkout flows (70%)

Seven out of ten sites had at least one keyboard trap in their checkout flow. The most common culprit was the payment step, where embedded card input iframes captured focus and refused to let go. A keyboard user could tab into the card number field but could not tab out to reach the submit button.

This is not a minor inconvenience. It is a complete blocker. A customer who cannot complete checkout cannot buy from you. Given that roughly 2.4 million people in the UK rely on keyboard navigation, this is revenue left on the table.

The fix depends on your payment provider. Stripe and Braintree both offer accessible embedded payment forms, but you need to configure them correctly. Test the entire checkout flow with a keyboard before going live. Every time.

Missing form labels on payment pages (83%)

Twenty-five of the 30 sites had at least one unlabelled form input on their payment or delivery address pages. Screen reader users heard "edit text" or "text field" with no indication of what information was expected.

The most commonly unlabelled fields were postcode lookup inputs, phone number fields, and delivery instruction text areas. In several cases, placeholder text was used instead of a proper label, which disappears as soon as the user starts typing.

The fix is simple: use a <label> element associated with each input via the for attribute. If you need the label to be visually hidden, use a CSS class that keeps it accessible to screen readers.

Colour-only error indicators (67%)

Two thirds of the sites relied solely on colour to indicate form errors. A red border appeared around the field, sometimes with the field text turning red, but no icon, no text message, and no ARIA announcement.

For the roughly 300,000 colour blind men in the UK, a red border on a white background can be invisible. Even for sighted users, a colour change without an explanatory message forces them to guess what went wrong.

Every error state should include a text message explaining the problem, an icon as a secondary visual cue, and an ARIA live region announcement so screen reader users are notified immediately.

Inaccessible cookie banners (90%)

This was the most common issue overall. Twenty-seven of 30 sites had cookie consent banners with at least one accessibility problem. The most frequent issues were: banners that could not be dismissed via keyboard (47%), reject buttons with insufficient contrast (60%), and banners that were not announced to screen reader users (37%).

Cookie banners are the first thing users encounter. If that first interaction is broken, you have already lost trust. Most consent management platforms offer accessible configurations, but they require manual setup. The defaults are rarely sufficient.

Missing skip links (60%)

Eighteen of the 30 sites had no skip link. On an e-commerce site with a mega-navigation header containing dozens of links, this means keyboard users must tab through every single navigation item on every page load before reaching the main content.

On product listing pages with 40 or more items, the problem compounds further. A skip link takes minutes to implement and transforms the keyboard navigation experience.

Poor heading hierarchy on product pages (73%)

Twenty-two sites had heading hierarchy issues on their product pages. The most common pattern was jumping from H1 (the product name) directly to H4 or H5 for section labels, skipping H2 and H3 entirely. Several sites used styled <div> or <span> elements instead of headings altogether.

Screen reader users navigate by heading level. A broken hierarchy means they cannot quickly scan the page to find product details, reviews, or delivery information. They have to listen through everything linearly.

Use headings in order: H1 for the product name, H2 for major sections (Description, Reviews, Delivery), H3 for subsections within those. It mirrors how sighted users visually scan the page.

What to do about it

If you run an e-commerce site, start by testing your checkout flow with a keyboard. Can you add an item to the basket, enter your details, and complete payment without a mouse? If you get stuck anywhere, your customers are getting stuck there too.

Run an automated scan with a tool like Lumi to catch the structural issues: missing labels, contrast failures, heading hierarchy problems. Then test manually for the interaction issues that automation cannot catch: keyboard traps, focus management, screen reader announcements.

The sites in our sample that scored best were not the ones with the biggest budgets. They were the ones that tested with assistive technology during development, not after launch.