C6Sufficient technique WCAG 1.3.2 WCAG 1.4.5 WCAG 1.4.9 WCAG 2.4.1 Level A Human testing required

Keep source order meaningful when CSS repositions content

Write the page in structural markup, in the order it means something, and let CSS put it where the design wants it. W3C lists C6 as sufficient for 1.3.2 Meaningful Sequence in combination with the general technique of ordering content meaningfully, so the pair is what passes. The reason W3C gives is broader than the one people usually give. This is not only about screen readers. It is about the page still working when the style sheet is not applied at all. That happens when a reader turns styling off, when a stylesheet fails to load, and when anything reads the document rather than the rendering. Flexbox order, grid placement and absolute positioning all make it easy to show one order and store another, and the stored one is what most software gets.

How we find it in an audit

Turning CSS off is the fastest useful test on the whole list and it takes one click. We read the unstyled page top to bottom and check it still tells the story, then tab the styled page and check the focus order matches what the eye follows. Automated tools can flag suspicious positioning and cannot judge whether the resulting order means anything.

How affected users experience it

Reading order is source order, whatever the screen shows. A checkout that visually puts the summary above the form but stores it after the submit button reads as a form with a mysterious list of numbers arriving after the person has already paid. Nothing on screen would tell a designer that, which is why the unstyled read is worth the click.

Passes vs. fails

Passes: headings exist in the code. Fails: one flat wall of text.

Passes

<div class="steps">
  <div>Step 1. Enter details</div>
  <div>Step 2. Confirm</div>
</div>
/* CSS places them side by side, source order stays meaningful */

Fails

<div style="float: right">Step 2. Confirm</div>
<div style="float: left">Step 1. Enter details</div>

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

HTML images contain no textNothing implements this yet
Bypass Blocks of Repeated ContentA tool finds candidates, you decide
Document has heading for non-repeated contentNothing implements this yet
Document has a landmark with non-repeated contentA tool can check this
Block of repeated content is collapsibleNothing implements this yet
Document has an instrument to move focus to non-repeated contentNothing implements this yet

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 only alongside G57, so the pair is what passes and neither half does on its own.

This guide is our interpretation of W3C technique C6: Positioning content based on structural markup. 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.