Keyboard Access and Focus

Many people navigate websites without a mouse. They may use a keyboard, switch device, voice control, or another input method. Native links, buttons, and form controls already provide familiar keyboard behavior.

Use an anchor for navigation and a button for an action. Do not replace them with clickable div elements unless you are deliberately building a fully accessible custom widget—and most ordinary interfaces do not need one.

The browser’s focus indicator shows which element will receive keyboard input. Do not remove it without providing an equally visible replacement.

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

This is only an example. In a real design, choose a focus color and thickness that remain visible against every relevant background.

Press Tab to move forward, Shift+Tab to move backward, Enter to follow a link or activate a button, and Space to activate a focused button or toggle. Check that focus is not trapped unexpectedly, hidden controls are not focusable, and the order follows the reading order.