F1Documented failure WCAG 1.3.2 Level A Human testing required

Do not rearrange meaning with CSS positioning

F1 is a documented failure, so it describes a way the meaningful sequence rule gets broken rather than a way to satisfy it. If your page matches it, you have a defect. The shape is always the same. CSS puts a price beside product A on screen while the markup pairs it with product B, and assistive technology follows the programmatically determined order rather than the pixels. Absolute positioning is what the published example uses, because the technique is older than flexbox. The modern version of the same defect is the order property and a reversed flex direction, which nobody wrote a technique for and which breaks in exactly the same way. Two fixes work. Match source order to visual order, or use markup that carries the relationship, a table or a definition list, so the pairing survives without any positioning at all.

How we find it in an audit

Four checks each settle this on their own and we run more than one. Read the code and work out the logical reading sequence. Inspect the accessibility tree. Listen to the page with a screen reader. Or strip the positioning styles and see what order the content falls into. That last one is fastest, and it is where we start, because a page whose unstyled sequence stops making sense has already told you the answer. Automated tools can list positioned elements. Whether the reordered page still means what it meant is reading.

How affected users experience it

You hear product B labeled with a price that belongs to product A. Nothing warns you. There is no second version to compare against, because the order you are hearing is the only order your software has. Someone using a screen magnifier meets the same problem from the other side, seeing two things side by side that the page never joined together. The result is a number attached to the wrong thing, in the version of the page that reader actually has.

Passes vs. fails

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

Passes

<div class="plan"><span>Basic plan</span> <span>$10/mo</span></div>
<div class="plan"><span>Pro plan</span> <span>$40/mo</span></div>
<!-- Source order matches visual order. CSS is left to decorate. -->

Fails

<span class="pos-top-left">Basic plan</span>
<span class="pos-bottom-right">$40/mo</span>
<span class="pos-bottom-left">Pro plan</span>
<span class="pos-top-right">$10/mo</span>
<!-- On screen each price sits beside the right plan. In the DOM it sits beside the wrong one. -->

The other techniques filed under this rule

12 guides on this site are filed under 1.3.2 Meaningful Sequence. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.

This guide is our interpretation of W3C technique F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS. 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.