Start scanning free

( Perceivable / WCAG 1.3.2 )

CSS flex or grid order does not match DOM order

This check maps to Meaningful Sequence. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Moderate Level A WCAG 1.3.2 — Meaningful Sequence

What’s wrong

CSS order property is used on flex or grid children to change the visual sequence away from their DOM order.

Why it matters

Screen readers and keyboard navigation follow DOM order, not visual order. When CSS reorders elements visually, keyboard users experience content in a completely different sequence to mouse users.

How to fix it

Reorder elements in the HTML source to match the intended reading order. Use CSS order only for purely decorative layout changes.

Before 
<div class="layout">
  <aside>Sidebar</aside>
  <main>Main content</main>
</div>

.layout { display: flex; }
main { order: -1; }
After 
<div class="layout">
  <main>Main content</main>
  <aside>Sidebar</aside>
</div>

Learn more