accessibility
Keyboard navigation
What is keyboard navigation?
Keyboard navigation is operating an interface with the keyboard alone - Tab to move between controls, arrow keys to move within a group, Enter or Space to act. If the mouse vanished, everything would still have to work.
Also known as: keyboard access, keyboard operability
The demo
A small formatting toolbar. Click "start", then press Tab to reach it. In one mode every button is its own tab stop; in the other, Tab enters the group once and the ← → arrow keys move between buttons. Press Enter or Space to fire one.
Focus isn't in the toolbar yet. Click "start", then press Tab.
What this demo shows (text version)
A toolbar of six formatting buttons - bold, italic, underline, link, list, quote. In "every button a tab stop" mode the Tab key visits each button in turn, so reaching the last one takes six presses; in a real toolbar of twenty, that is twenty presses, repeated wherever the toolbar appears.
In "roving tabindex" mode the whole toolbar is a single tab stop. One Tab press lands on the active button; the left and right arrow keys then move focus along the row, Home and End jump to the ends, and Enter or Space fires the focused button. A running line announces which button has focus and which was just pressed, so the behaviour is clear without a mouse. This is the pattern keyboard users expect from any group of related controls.
When every button was its own tab stop, reaching the far end meant pressing Tab again and again. Switch to a roving tabindex and Tab drops you into the group just once - then the arrow keys carry you across it, the way a keyboard user expects a toolbar, a menu or a set of radio buttons to behave.
The rule of thumb: Tab moves between widgets, arrow keys move within one. A toolbar, a tab strip, a radio group or a menu should be a single tab stop, and once focus is inside, the arrows take over. Make all twenty buttons separate tab stops and you have handed every keyboard user twenty presses to get past a thing a mouse user clears in one glance.
My test is the cruellest and the simplest: unplug the mouse. If you can't reach a control, can't tell which one has focus, or can't fire it with Enter or Space, it is broken - and it was probably built from a clickable div instead of a real button. Use the real element and most of this comes free.