Keyboard Only

Before you start

Inside the dashed box below, clicks and taps do nothing. That is on purpose. For a lot of people it is every day: a mouse that hurts to use, a trackpad that died, a switch, a screen reader, voice control that moves focus for them. They get through the web with the keys you are about to use.

You will need five of them. Tab moves forward, Shift+Tab moves back, Enter activates buttons and links, Space ticks boxes, and the arrow keys move inside menus. There is also a decoy in the box. See if you can find it.

What you just learned

• Tab order is DOM order. Focus moved through the controls in the sequence they appear in the HTML, not in the sequence they appear on screen. When those differ, keyboard users get lost. See Reading order is not visual order.
• A div is not a button. The grey "Continue" box has a click handler and looks like a control. It never received focus because a div is not focusable. Use button, and it works for everyone by default.
• Enter and Space are not the same. Enter activates buttons and links. Space ticks checkboxes and also presses buttons. Enter on a checkbox does nothing, and a form that submits on Enter inside a checkbox has reinvented a trap.
• Menus use the arrow keys. A menu button opens with Enter, Space, or an arrow key; the arrows move between items; Enter chooses; Escape closes and puts focus back on the button. That is the pattern screen readers and voice control expect.
• You could see where you were. Every control in the box has the site's two-tone focus ring. Try the same task on a page with outline: none and the count stops mattering, because you cannot tell where focus is. The Focus Lab is about that.

The quick test for your own pages

Unplug the mouse. Load the page. Try to do the one thing the page is for. Every place you get stuck is a bug, and the skip link is usually the first one.

Embed this lab

Host the Keyboard Only lab on your own page with one element and one script. It runs entirely in the visitor's browser, sends nothing back, and adds a small credit link.

<div data-a11y-world-lab="keyboard"></div>
<script src="https://a11y.world/embed.js" async></script>