Tab order that follows what you see
Live demo
Caveat and fallback
CaveatThose four buttons are in the order third, first, fourth, second in the markup and order puts them right on screen. Tab through them and focus now goes left to right, because reading-flow hands focus order and the accessibility tree the visual order instead of the DOM one. It reaches direct children of that one flex or grid container and nothing deeper.
FallbackWithout support you get today's behaviour, which is tab order following the DOM and disagreeing with the screen, so nothing regresses by adding it. Treat it as a repair for a layout you cannot reorder rather than a licence to scramble order freely: source that already reads in the right sequence needs none of this.
Source code
<div class="row">
<button class="a">third</button>
<button class="b">first</button>
</div>
.row {
display: flex;
reading-flow: flex-visual;
}
.a { order: 3; } .b { order: 1; }Published