​davedavies.dev​

March 11th

Why site navigation needs to follow standard interaction patterns.

Hi again 👋

Navigation is one of the most commercially important parts of any online store.

If customers cannot browse categories easily, they never reach the product pages where the sale actually happens.

And yet it’s surprisingly common to see navigation that looks polished, but breaks down the moment someone tries to use it without a mouse.

This week’s video shows a good example of how that happens.

Visually, the navigation appears to work well. The dropdown opens, the categories are clear, and the layout looks tidy.

But when you try to use the keyboard, two problems appear.

First, when the submenu opens, the keyboard focus never actually moves into it. Pressing Tab simply jumps the focus to the next top level navigation item, instead of letting the customer explore the submenu options.

Visually the menu is open - but functionally, it cannot be used.

Second, the control that opens the submenu is coded as a link, but behaves like a button.

Why is this a problem?

Links are expected to take you somewhere - to a new page. Buttons are expected to perform an action, like opening a menu, opening a modal or submitting a form. When those roles are mixed together, assistive technology receives conflicting signals about what the control actually does.

This might sound like a small technical detail, but it directly affects how customers expect to explore your products. And it's surprisingly common across the web.

When navigation becomes unpredictable, browsing breaks down.

And if customers cannot reliably explore your categories, they never reach the product pages where they can actually buy.

That’s why custom navigation components need to follow established interaction patterns.

What do established interaction patterns look like?

Established interaction patterns are simply the behaviours customers already expect from navigation, because they see them on almost every well built website.

When a menu opens, the keyboard focus should move into that menu so the customer can immediately explore the options.

The control that opens the menu should behave like a button, not a link, because it performs an action rather than taking the user to another page.

Once inside the menu, the customer should be able to move through the options in a logical order using the keyboard, without the focus jumping somewhere unexpected.

Nothing surprising. Nothing clever. Just the predictable behaviour people rely on when browsing products.

How to now check your own site:

Test your own site today: Put your mouse to one side and use the Tab key to move through your main navigation.

When a menu opens, watch where the focus goes.

If the focus skips past the submenu, jumps somewhere unexpected, or never lets you reach the category links, the navigation is not behaving the way customers expect.

Finally...

• Use the correct control type.
• Move keyboard focus into opened menus.
• Keep the interaction predictable.

When those fundamentals are right, navigation feels effortless. Customers can explore categories, understand what’s available, and move naturally toward the products they want.

If you can’t, some of your customers won’t be able to browse your store either.

​Watch the video​

Talk soon,
Dave

P.S. Have you ever spotted something like this on your own product pages? Hit reply and let me know - I read every reply.