Tab order

Tab order is the sequence in which interactive elements on a page receive focus when the Tab key is pressed. By default, it follows the order of the HTML code. If this order does not match the visual order of the page, keyboard users become disoriented.

Press Tab. Focus jumps to the first link, then the second, then the form button. This sequence is the tab order. It follows the order of elements in your HTML code, not their visual position on the screen.

When the two match, nobody notices. When they diverge, keyboard navigation becomes a maze.

#What the browser does by default

The browser traverses focusable elements (links, buttons, form fields) in the order they appear in the DOM. Well-structured HTML produces a logical tab order without any configuration.

The WCAG criterion 2.4.3 (level A) requires that this order preserves the meaning and operability of the content. The RGAA repeats this requirement in criterion 12.8.

The rule boils down to one sentence: the DOM order must match the visual reading order.

#The CSS order trap

Flexbox and Grid allow you to reorganize the display without touching the HTML. The order property moves an element visually, but the browser continues to tab according to the DOM:

/* The sidebar displays first, but focus reaches it last */
.sidebar { order: -1; }

The user sees the sidebar on the left, presses Tab, and focus jumps to the main content. Immediate disconnect. To fix it, move the element in the HTML rather than compensating with CSS.

#Why positive tabindex is forbidden

The tabindex attribute accepts positive values (1, 2, 3…). These elements receive focus before all others, regardless of their position in the DOM. On a page of 50 interactive elements, a single tabindex="1" is enough to break the entire navigation logic.

The A11Y Project summarizes it: use only two values.

<!-- tabindex="0": included in the natural DOM order -->
<div role="button" tabindex="0">Action</div>
 
<!-- tabindex="-1": focusable only via JavaScript -->
<main id="content" tabindex="-1">…</main>

tabindex="0" makes an element focusable at its place in the DOM. tabindex="-1" removes it from the tab order but allows JavaScript to send focus to it, for skip links or modals.

#In summary

Structure your HTML in reading order. Avoid reorganizing the display with CSS order when it breaks the tab logic. Never use tabindex with a positive value. And test: press Tab and navigate your page. If the flow surprises you, it will surprise your users too.