• Success Criterion 1.3.2
  • Conformance level A
  • W3C reference F1

CSS Layout Changes That Scramble the Screen Reader’s Reading Order

1.3.2 — Meaningful Sequence

Scenario

Setting

A dating app's profile setup

What’s wrong

Content is visually re-arranged with CSS so the order you see on screen is different from the order a screen reader reads it — the meaning changes or gets confusing when read aloud.

Example 

<div class="prompt-card" style="display:flex; flex-direction:column;">
  <p class="answer" style="order:1;">Hiking at sunrise with my dog</p>
  <p class="label" style="order:2;">Prompt: My favorite weekend activity</p>
</div>

Why it matters

A screen reader user hears the answer first with no context, then a label that sounds like it introduces something new, so the prompt-and-answer link is lost.

How to test

Disable CSS (or use a reader-view/outline tool) and read the page top to bottom: if the flow makes no sense compared to the styled layout, it fails.

How to fix

Match DOM order to visual order whenever CSS "order" changes what appears first on screen.

<div class="prompt-card">
  <p class="label">Prompt: My favorite weekend activity</p>
  <p class="answer">Hiking at sunrise with my dog</p>
</div>

Outcome

A screen reader user now hears the prompt before the answer, so it is clear what they are responding to.

Who is affected

Screen reader users and other assistive tech users, who rely on DOM order rather than CSS order, lose the connection between each prompt and its answer.

Learn more

Related scenarios