Web Accessibility

Tab Order

The sequence keyboard focus moves through a page, which should follow the visual order.

Tab order is the sequence in which keyboard focus moves through a page's interactive elements. It follows the DOM order by default, which is why a layout that visually reorders content with CSS can produce a focus order that jumps around the screen. Positive tabindex values override it and almost always make things worse.

Definition

Pressing Tab moves focus through focusable elements in DOM order. Trouble arises when CSS — flexbox order, grid placement, absolute positioning — changes the visual order without changing the DOM.

tabindex="0" makes an element focusable in its natural position and tabindex="-1" makes it focusable only in code. Any positive value jumps the element to the front of the order and is a well-known source of unpredictable focus.

Why It Matters

For someone navigating by keyboard, a focus order that does not match what they see is disorienting, and a focus outline that has been removed makes it impossible.

Example

Two columns rendered in source order A then B, but displayed with CSS as B then A, will focus A first — the user tabs to the bottom of the screen, then back to the top.

Why CSS layout breaks focus order

Focus follows the DOM, and modern layout tools deliberately decouple the visual arrangement from it. Flexbox order, grid placement and absolute positioning all let you show elements in an order the source does not have.

For a sighted keyboard user the result is focus that appears to teleport: it moves from the top of the screen to the bottom and back for no visible reason. The fix is almost always to reorder the DOM to match the intended reading order and let CSS handle presentation within that — not to patch it with tabindex, which compounds the problem.

A positive tabindex is worth calling out separately: any value above zero pulls that element ahead of everything with tabindex="0" or none, across the whole page. One stray tabindex="1" reorders the entire document.

How SlapMyWeb checks this

The audit checks the things that break focus order mechanically: positive tabindex values, which jump elements to the front of the order, and focus outlines removed in CSS without a replacement. It cannot tell whether the DOM order matches the visual layout — that needs a person pressing Tab — so it reports the conditions that make a mismatch likely rather than claiming to detect one.

Related Terms

Accessibility Aria Skip Navigation

Know the term.
Check your own site.

A free audit tells you whether this is currently costing you score points — and exactly what to change.

Run a free audit

Free foreverNo signupResults in 30s