Free tool

Keyboard navigation

Many people never touch a mouse: motor disabilities, tremors, screen readers, or simply habit. We list every stop the Tab key makes on your page, in order, and what it cannot reach.

We read the page and up to five of its style sheets, once, without keeping anything.

Try with physalisdesign.com, quebec.ca

Try it yourself in two minutes

  1. Put the mouse asideOpen your page, click in the address bar, then press Tab repeatedly.
  2. Follow the markerAt each press, a visible outline should show where you are. If it disappears, the focus style was removed.
  3. Use itOpen the menu with Enter, fill in the contact form, close a window with Escape. Shift + Tab goes back.

What makes a good keyboard path

01

Real elements

Links with href, <button> for actions: the browser handles Tab, Enter and Space by itself.

02

A visible focus

Never outline: none without a replacement. :focus-visible shows the outline for the keyboard only.

03

A shortcut

A “Skip to content” link as the first stop saves dozens of presses on every page.

The order of the list above is the order of your code. If an element appears on screen in one place but in the code somewhere else (CSS grid, order, absolute positioning), the focus will jump around: fix the code order rather than adding tabindex values.