Why a Perfectly-Looking Page Can Still Have a Broken Tab Order
A layout uses CSS order and flex-direction: row-reverse to visually
rearrange three columns, without touching the underlying HTML source
order. It looks completely correct to a sighted mouse user running a
normal visual QA pass.
What actually happens to keyboard tab order in this situation?
The correct answer is "It still follows DOM order, so it jumps around visually."
Tab order generally follows DOM source order, not whatever a CSS
property visually rearranges — a layout reordered with order or
flex-direction: row-reverse without reordering the underlying markup
produces a tab sequence that jumps unpredictably around the screen,
even though it looks completely correct visually. It's a common bug
precisely because it's invisible in a normal visual QA pass.
Browsers don't automatically sync focus order to visual CSS order — if they did, this wouldn't be a citable bug at all. The page doesn't become completely untabbable; every element is still reachable, just in a disorienting sequence. Screen readers don't silently correct this either — they follow the same broken order a sighted keyboard user hits.
Share this question