Lessons · HTML and CSS · the HTML decides, not the CSS
The HTML decides, not the CSS
Tab follows document order. CSS can move things on screen without moving them in the order, and then the two disagree.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
A keyboard that jumps around the screen apparently at random is disorienting for anybody and impossible for somebody using magnification, who sees a fraction of the page at a time.
How to think about it
Put content where it belongs in the reading order, and lay it out with something that does not reorder focusable things -- grid areas per breakpoint rather than `order` on controls. Reordering non-focusable content is harmless.
Worked example
<a href="#main" id="skip">Skip to content</a><nav>…</nav><main id="main"><button id="b1">One</button><div id="d" role="button">Two</div><button id="b2">Three</button></main>Three Tabs reaches b1, a fourth reaches b2. Document order exactly, and the unreachable div simply is not in it.
Your turn
Tab follows the order things appear in the
Write a page and watch it render
The trap
Duplicating markup and hiding one copy per breakpoint gives screen reader users the whole thing twice, which is a worse bug than the one being fixed.