gotchajavascriptMajor
Tab order — DOM order controls focus sequence, not visual order
Viewed 0 times
WCAG 2.1 Level A
tab orderfocus orderDOM ordervisual order mismatchWCAG 1.3.2flex-direction reverse
Problem
CSS properties like flex-direction: row-reverse, order, float, and position: absolute visually reorder elements without changing their DOM order. Keyboard navigation follows DOM order, creating a mismatch between what sighted users see and what keyboard users experience.
Solution
Ensure the DOM order matches the visual reading order. Use CSS to achieve visual layout changes only when the DOM order remains logical.
// BAD — visual order differs from DOM order
<style>
.card { display: flex; flex-direction: row-reverse; }
</style>
<div class="card">
<button>Secondary</button> <!-- visually on right, tab first -->
<button>Primary</button> <!-- visually on left, tab second -->
</div>
// GOOD — DOM order matches visual left-to-right
<div class="card">
<button>Primary</button>
<button>Secondary</button>
</div>
<style>
.card { display: flex; }
/ achieve right-to-left layout with margin-left: auto instead /
.card button:first-child { margin-left: auto; order: 2; }
</style>
// BAD — visual order differs from DOM order
<style>
.card { display: flex; flex-direction: row-reverse; }
</style>
<div class="card">
<button>Secondary</button> <!-- visually on right, tab first -->
<button>Primary</button> <!-- visually on left, tab second -->
</div>
// GOOD — DOM order matches visual left-to-right
<div class="card">
<button>Primary</button>
<button>Secondary</button>
</div>
<style>
.card { display: flex; }
/ achieve right-to-left layout with margin-left: auto instead /
.card button:first-child { margin-left: auto; order: 2; }
</style>
Why
WCAG 1.3.2 requires that content reading and navigation sequence be programmatically determinable and that sequence preserves meaning. A focus order mismatched from visual order is disorienting for keyboard users.
Gotchas
- The CSS 'order' property changes visual position but not DOM position — avoid using it when the visual difference matters for navigation
- Positive tabindex values force a custom tab order — this almost always makes things worse, not better
- Position: absolute / fixed elements are still in DOM order for tab flow unless removed from the accessibility tree
- Reading order issues also affect screen reader virtual cursor navigation, not just Tab key navigation
Context
Layouts using flexbox order, CSS Grid, or absolute positioning for visual reordering
Revisions (0)
No revisions yet.