What happens when product options block customers from buying?

· 5 min read

Hi again,

If your product page uses custom elements for things like grind type, pack size, or colour options, there’s a chance some of your customers can’t select them at all.

From the outside, everything looks fine. The options look like buttons, they sit in the right place on the page, and the mouse works.

But try it this way:

  • Put your mouse to one side.
  • Press Tab to move through the page.
  • Watch where the focus goes.

On many site which use custom product options, the highlight moves through the links and buttons, then jumps straight past the product options. The customer arrives at the add to basket button without ever being able to press Enter or Space on the size or colour they wanted… so the choice never gets made.

The options are there. They just can’t reach them.
And if they can’t choose what they want, they can’t add it to their cart.

At this point, many will just assume the page is broken and go and buy from someone else - usually your competitor.

See how this plays out on a real product page.

Screenshot of a Pact Coffee product page showing custom bag size options that look clickable but cannot be selected using a keyboard.
These options look like buttons, but they cannot be reached or selected with a keyboard.

Why this happens?

It comes down to the way your custom components are built. Instead of using real buttons or inputs, they are often divs with a click handler. This isn’t necessarily a problem - but it does mean you need to consider essential keyboard behaviour.

Unless built to behave like native elements, the browser does not treat them as something you can focus with a keyboard, and screen readers do not get anything useful to announce.

The good news is the fix is usually simple.

If those options are built with real buttons, radios, and form inputs, the browser gives you keyboard support, focus order, and announcements for free. You can still style them to look exactly like your current UI, but more customers can choose what they want and complete their purchase.

Try this today:

Load a product page, put the mouse away, and tab through the page. If you cannot select an option with the keyboard, some of your customers will not be able to buy from you.

Speak soon,
Dave

P.S. If you’ve ever run into product options that behaved strangely while shopping online, I’d love to hear about it. I read every reply