Match DOM order to visual order
Keep the order of the markup and the order on screen the same. W3C lists C27 as sufficient for 1.3.2 Meaningful Sequence, and as sufficient for 2.4.3 Focus Order on the path where focus follows the sequences and relationships in the content. It names three ways a divergence hurts, and most write-ups only cover two. A reader who has switched the author's styling off gets the source order. Anything reading the content directly, a screen reader among them, gets the source order. And keyboard focus follows the source order regardless of what CSS did. W3C is careful about the judgment, too. Each order can be meaningful in itself and still cause trouble. The question is not whether CSS moved anything. It is whether what a listener hears and what a tabbing user reaches still match what the page appears to say.
How we find it in an audit
We tab the page and watch where focus goes, then turn CSS off and read what is left. Both take a minute and between them they catch every real instance. Automated tools can spot the CSS properties that reorder content, order, flex-direction reverse, grid placement, absolute positioning, and cannot tell a harmless rearrangement from one that breaks the sense.
How affected users experience it
A form whose Save button renders first and sits last in the markup gives a keyboard user a page where the first thing they see is the last thing they can reach. A screen-reader user gets it in the stored order, so a summary meant to be read before a decision arrives after it. Both are reading a different page from the one on screen, and neither has any way to know.
Passes vs. fails
Passes
<button class="save">Save</button>
<button>Cancel</button>
<!-- want a different order, change the markup -->Fails
.actions { display: flex; }
.save { order: -1; }
/* Save renders first and is tabbed to last */Other ways to satisfy this rule
12 guides on this site are filed under 1.3.2 Meaningful Sequence. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C6sufficientKeep source order meaningful when CSS repositions content
- C8sufficientSpace letters with CSS, not blank characters
- G57sufficientPut content in a meaningful reading order
- H34sufficientKeep mixed-direction text reading in the right order
- H56sufficientFix nested right-to-left text with the dir attribute
- PDF3sufficientFix the reading and tab order in PDFs
This guide is our interpretation of W3C technique C27: Making the DOM order match the visual order. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.