The navigation menu that covered every product for keyboard users

Industry

UK independent stationery & gift retailer, online only

What we tested

Homepage, a category listing page, a product page, cart, and checkout

Testing method

Automated scan first, then manual keyboard-only navigation and NVDA, a free screen reader commonly used for UK compliance testing

The challenge

A books section, a standard product catalogue and a card-payment checkout, a straightforward ecommerce setup on the surface. The question wasn't whether the site looked tidy, it's whether a keyboard user could actually see and buy the products on it.

The solution: automated scan, then manual testing

We ran an automated scan first, the same free type of check anyone can run in seconds.

• Serious (3): list items sitting outside a proper list container (9 instances), links with no announceable text and unclear purpose (7 instances), and text with insufficient contrast against its background (2 instances).
• Moderate (2): content sitting outside any landmark region (9 instances), and headings that skip levels.
• Minor (1): one instance of an inappropriate ARIA role.

Nothing critical, and nothing here is unusual for a site of this size. Taken alone, this looks like a moderately tidy site with a manageable snag list. None of that tells you whether a keyboard user can actually see the page. We then tested by hand: tabbing through every interactive element and listening to the site with NVDA.

The result: what only manual testing found

A navigation menu that won't close, and covers the page

The site has no working skip link, so there's effectively no way to bypass the header and get to the content directly. Every navigation category automatically opens its dropdown the moment it receives keyboard focus, and the final dropdown, a large "Books" menu, doesn't close again once you've tabbed past it. It stays visually open, sitting on top of the page underneath: on category pages it covers the entire top row including the filters, on product pages it covers the entire product.

This isn't a screen-reader-only problem. A sighted keyboard user tabs down to look at a product and finds it hidden behind a menu they have no way to close. This didn't appear in the scan at any severity: an automated tool checks whether a menu element has the right role and label in the markup; it doesn't tab through it in sequence and check whether something is left open and obscuring the page underneath.

The cart says it's empty when it isn't

Adding an item opens a slide-out cart preview. NVDA announces that the cart has opened, and, in the same breath, announces it as empty, even though the item was just added and is visibly sitting in it. A screen reader user has every reason to believe their item wasn't added, and either tries again or gives up. Changing an item's quantity resets keyboard focus back to the very start of the page, and when a quantity change or removal changes the total, the new total is never announced, only the original.

A pattern worth flagging: prices that are never announced

NVDA never announces product prices anywhere on this site. This is now a pattern we've seen across several of our audits, on sites otherwise unrelated to each other.

Everything else found by hand

• Two "More info" buttons beside sensitive checkout fields announce themselves as "expanded" once activated, but never actually read out the help content they're supposed to reveal.
• The expiry date field's "MM/YY" placeholder is read aloud by NVDA as "millimetre, YY," at exactly the worst moment: while someone is trying to complete a card payment.

The scan correctly found real, fixable issues. None of it, though, would have told this retailer that their own navigation menu covers up the products on their site for keyboard users, or that their cart tells screen reader users it's empty right after they've added something to it.