Your custom dropdown might work with a mouse, but does it work without one?

Hi again,

If you’re using a custom dropdown, has it ever been tested with just the keyboard.
No mouse. Just Tab, Enter & Space keys.

Because often everything looks fine, and works perfect with your mouse, but the moment you try to open the dropdown without a mouse, nothing happens. Or it opens, but you can’t move through the options. Or it closes again before you can choose anything.

It’s easy to overlook, but if it stops your customers making a simple choice, then their journey ends there.

This happens more than people realise - and automated tests like Google’s Pagespeed Insights won’t pick it up.

Remember: No one has ever lost a sale by using the native select dropdown.

It just works. Every time. For everyone. It works with keyboards. It works with screen readers. It works if JavaScript loads slowly. The browser takes care of all the behaviour, so you don’t have to. You get consistent, accessible interaction for free.

But if you do prefer a custom dropdown, it has to behave the same way as a native dropdown. It has to open reliably. Stay open long enough to make a choice. Let people move through the options. Apply the choice when confirmed. Nothing clever. Just the basics people already expect.

Here’s this exact issue happening on a real product page, so you can see what it looks like and what to check for on your own product pages: https://davedavies.dev/reviews/accessible-custom-dropdown/

Speak soon,
Dave

P.S. Thanks for reading - have a great rest of your day.