Keyboard Navigation Mode

Keyboard navigation mode overlays the page with numbered badges on every focusable element, showing the order in which they receive focus when a user presses Tab. This makes it easy to spot tab order problems - skipped elements, illogical sequences, or focus traps - at a glance.

Activating keyboard navigation mode

Click the Vesper Inspect icon in the Chrome toolbar.
In the popup, toggle Keyboard Navigation on.
Numbered badges appear on all focusable elements in their tab order sequence.

Keyboard navigation mode can be used alongside hover inspection, or independently.

Reading the overlay

Each focusable element is annotated with:

A numbered badge indicating its position in the tab sequence (1 = first element reached by pressing Tab from the top of the page).
A highlight border marking the element's boundary.

Elements are included in the overlay if they are natively focusable (links, buttons, inputs, selects, textareas) or have been made focusable with tabindex="0". Elements with tabindex="-1" are not shown in the overlay because they are not reachable via Tab.

Common issues to look for

Non-sequential tab order

The numbered badges should follow a logical visual reading order - typically left to right, top to bottom. If the numbers jump around the page unexpectedly, the DOM order or tabindex values may need adjustment.

Avoid positive tabindex values
Using tabindex="1", tabindex="2" and so on creates a custom tab order that overrides the natural DOM sequence. This is almost always harder to maintain than fixing the underlying DOM order. Use tabindex="0" (to include a non-interactive element) or tabindex="-1" (to enable programmatic focus only) instead.

Missing focusable elements

Interactive elements that are not visible in the overlay cannot be reached by keyboard users. Common causes include:

display: none or visibility: hidden applied to an element that should be focusable
A custom interactive widget built from a non-interactive element (like a <div>) without tabindex="0" and keyboard event handlers
tabindex="-1" applied to an element that should be in the tab sequence

Focus traps

If pressing Tab repeatedly does not cycle through all numbered elements in order, there may be a focus trap - a region of the page that captures focus and does not release it. Focus traps are sometimes intentional (e.g., inside an open modal dialog) but should never occur on a standard page outside a modal context.

Extra focusable elements

Decorative elements or elements that are visually hidden but still in the tab sequence show up in the overlay with sequential badges. These create a confusing keyboard experience. Ensure decorative elements use aria-hidden="true" and that visually-hidden-but-focusable elements are handled correctly.

Keyboard navigation and skip links

A well-implemented skip link (e.g., "Skip to main content") should appear as badge 1 or 2 in the overlay - the first or second element reached by keyboard users at the top of the page. If your skip link is not visible in the overlay or appears far down the sequence, it will not be useful to keyboard users who need it most.