A screen reader (VoiceOver on iOS, TalkBack on Android) never "sees" the screen — it walks the platform accessibility tree in source (DOM) order, a depth-first pre-order traversal, and reads each focusable node's label aloud. Sighted users instead scan the rendered layout in a visual reading order — top to bottom, left to right (the "Z-pattern"). WCAG Success Criterion 2.4.3 (Focus Order) requires these two orders to match; when a developer reorders elements visually with CSS/flex without reordering the underlying markup, the two orders diverge and a screen-reader user is bounced around the screen unpredictably.
Path length: L(order) = Σ |pᵢ − pᵢ₊₁| for i = 1..n−1
Efficiency: E = L(visual order) / L(dom order) (1.0 = perfectly matched, lower = worse)
Dwell time: t(node) = max(0.4s, words(node) / (wpm/60))
Full pass: T = Σ t(nodeᵢ) over the traversal sequence
- Play focus scan — steps the yellow focus marker through the current DOM order, dwelling on each element proportionally to how many words it would speak (word count ÷ reading speed), with a 0.4s floor so short labels like nav icons don't flash by instantly.
- Shuffle DOM order — randomizes the source order, simulating markup where interactive elements (e.g. a bottom nav coded before the main content) were written out of visual sequence — a very common real-world accessibility bug.
- Fix to visual order — restores DOM order to match the visual layout, the WCAG-compliant state, where the blue traversal path and green ideal path overlap and efficiency returns to 1.00×.
- Order efficiency — the ideal path length divided by the actual DOM-order path length. A shuffled order forces the focus marker to jump back and forth across the screen, so its traversal path is longer and efficiency drops well below 1.00×; that extra distance is exactly the disorientation a screen-reader user experiences.
Real-world relevance: this is precisely what accessibility auditing tools (Xcode Accessibility Inspector, Android Accessibility Scanner) flag as a "focus order" violation, and precisely what QA teams test by turning on VoiceOver/TalkBack and swiping through an app blind.