In plain English
Some people never touch a mouse. They navigate entirely with the keyboard, Tab to move, Enter or Space to click, arrow keys inside menus. This rule is simple: if a mouse can do it, a keyboard has to be able to do it too. Every link, button, menu, slider, image zoom, modal, and checkout field.
The trouble almost always comes from custom controls built with plain <div>
or <span> elements plus a mouse-click script. A mouse can click them, but the
keyboard can’t even reach them.
Who this is for
- Screen-reader users, who operate everything by keyboard.
- People with motor conditions or tremors, who find a keyboard or switch device far easier than a mouse.
- Power users who simply move faster with the keyboard.
What “good” looks like
Use real, focusable elements, and they get keyboard support for free.
<!-- Good: a real button, keyboard-operable by default -->
<button type="button" onclick="addToCart()">Add to cart</button>
<!-- Bad: a div that only a mouse can click -->
<div class="btn" onclick="addToCart()">Add to cart</div>Test it with the mouse unplugged: Tab to each control, activate it with Enter/Space, and use arrow keys inside menus and carousels. If you can complete a purchase with only the keyboard, you pass.
Where stores get it wrong
Custom dropdowns, mega-menus, image zoomers, and “add to cart” controls built
from non-focusable <div>s are the usual failures, along with carousels whose
arrows only respond to a mouse. These show up constantly in a
10-minute self-check and on the
common failures list.