Keyboard Only: When There Is No Mouse

Lots of people never use a mouse. Some can't hold or aim one, because of a motor impairment, an injury or tremor. Some are blind and use a screen reader, which is driven from the keyboard. Others use switches, voice control or a mouth stick, and all of these act like a keyboard. Plenty of power users simply prefer it. On this page the mouse is "unplugged" inside every demo. Try each task using only the keyboard.

Focus visible

1. Email settings

Task: turn on "Weekly digest" only, then press Save.

Daily summary Weekly digest Product news Partner offers

The page's CSS includes *:focus { outline: none; }, and the checkboxes are custom-styled, so there is no sign of where you are. You have to count Tab presses and guess. Designers often remove the outline because they don't like how it looks when people click. Use :focus-visible instead: it only shows the ring for keyboard users. WCAG 2.4.7 (Focus Visible, Level AA). WCAG 2.2 adds 2.4.13 (Focus Appearance, Level AAA) for how big and clear the ring should be.

Skip links

2. Shop search

Task: search for "kettle". Count how many times you press Tab.

HomeStore

A mouse user goes straight to the search box. A keyboard user has to Tab through every link before it, more than 30 of them, and has to do it again on every page. A "Skip to content" link as the very first thing on the page lets them jump past. It can stay hidden until it gets focus. WCAG 2.4.1 (Bypass Blocks, Level A).

Focus order

3. Address form

Task: fill in every field from top left to bottom right, pressing Tab to move to the next one, then submit.

The fields are laid out with CSS Grid, but in the HTML they're in a different order. Tab follows the HTML, not what you see, so focus jumps around the form. It's easy to type your phone number into the Eircode box without noticing. The same thing happens with flex-direction: row-reverse, order and positive tabindex values. WCAG 2.4.3 (Focus Order, Level A) and 1.3.2 (Meaningful Sequence, Level A).

Custom controls

4. Checkout

Task: choose the Saturday morning delivery slot, turn on gift wrap, and press Pay now.

Choose a delivery slot ▾

Gift wrap

Pay now €54.99

All three controls are <div>s with click handlers. A <div> can't get keyboard focus and doesn't respond to Enter or Space, so for a keyboard user this checkout simply doesn't work. You can't buy anything. A real <select>, <input type="checkbox"> and <button> get all of that for free. WCAG 2.1.1 (Keyboard, Level A).

Keyboard trap

5. Code snippet

Task: type a title, add a line of code, then press Publish.

The editor uses Tab to indent code, which is handy, but it also catches Shift+Tab and offers no other way out. Once you're in, the keyboard can't leave, and nothing on the page tells you that. Code editors often fix this by letting Esc release focus, and say so on screen. WCAG 2.1.2 (No Keyboard Trap, Level A).

Dialogs

6. Delete a project

Task: open the Delete dialog, then change your mind and press Cancel.

Projects

Delete "Garden plan"? This can't be undone.

The dialog is a <div> drawn on top of the page. Opening it doesn't move focus into it, so Tab carries on through the buttons hidden behind the dark overlay, and you can't see where you are. The dialog is at the end of the HTML, so you have to get through all of them first, Esc does nothing, and the first button you reach is Delete. The native <dialog> element opened with showModal() moves focus in, keeps it there, closes on Esc and returns focus afterwards. WCAG 2.4.3 (Focus Order, Level A) and 2.4.11 (Focus Not Obscured (Minimum), Level AA).

The fix

Real elements, a visible focus ring, and a way past

Here are demos 2, 4 and 6 again, rebuilt. Keep the mouse unplugged and Tab into the box below.

Skip to search

Delivery slot Gift wrap

What changed, and what else you can do:

Never remove the focus ring without replacing it. Style :focus-visible so it is clear and has good contrast.
Skip links: make "Skip to content" the first focusable element. It can be hidden until it gets focus.
Order: keep the HTML in the same order as the layout. Avoid positive tabindex values.
Use real elements: <button>, <a href>, <input> and <select> are keyboard accessible already. If you must build a custom control, add tabindex="0", a role, and handlers for Enter, Space and the arrow keys.
Dialogs: use <dialog> with showModal(). Put the safe choice first.
No traps: if a widget needs Tab for itself, give it another way out, such as Esc, and tell people.
No hover-only content: menus and tooltips must also open on focus or with a click.
Test it: put the mouse away and try your own site. It takes two minutes and finds a surprising amount.