Why it matters
Screen readers follow DOM order, not visual order. If visual layout differs from code order, users may receive information in a confusing sequence.
Common violations
- CSS that reorders content visually but not in DOM
- Flexbox or Grid with order property creating mismatch
- Multi-column layouts where reading order is unclear
- Sidebars that appear before main content in DOM
Code examples
Bad
<div style="order: 2">Read first</div>
<div style="order: 1">Read second</div>Good
<div>Read first</div>
<div>Read second</div>How to fix
Ensure DOM order matches the intended reading sequence. Avoid using CSS order or positioning to create a different visual sequence than the code order.
Related criteria
Related resources
Scan your site