Visual order should match DOM (focus) order

Rule reading-order · Deeper checks · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

CSS (flex/grid order, absolute positioning) can make the visual order differ from the DOM order. Screen-reader and keyboard users follow the DOM order, so a mismatch makes content read or tab in a confusing sequence. This compares the actual rendered geometry against DOM order — something static tools can’t do. Comparison is per container (siblings only) with geometry-detected rows read in either direction, so multi-column layouts and RTL pages don’t trigger false alarms; cross-container reorders are intentionally out of scope for this heuristic.

How to fix#

Reorder the DOM to match the intended visual order; avoid using CSS order/positioning to visually reorder meaningful content.

Example#

<div style="display:flex"><a href="/2" style="order:1">Second</a><a href="/1" style="order:-1">First</a></div>

<div style="display:flex"><a href="/1">First</a><a href="/2">Second</a></div>

WCAG success criteria#

1.3.2 Meaningful Sequence — Level A#

When the order of content affects meaning, the DOM/reading order must match the intended visual order.

Understanding 1.3.2

2.4.3 Focus Order — Level A#

Focus must move in an order that preserves meaning and operability.

Understanding 2.4.3

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WCAG — Meaningful Sequence