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
Swipe (cm): L(dom order) × (screen width, inches ÷ 2.5 layout units) × 2.54
- 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, with a 0.4s floor so short labels like nav icons don't flash by instantly.
- Swipe prev / next — manually steps the focus one node at a time, exactly like a VoiceOver/TalkBack user swiping right (next) or left (previous) with one finger.
- 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×.
- Virtual phone diagonal — rescales the on-screen phone to a real device size (assuming a 19.5:9 panel); the same DOM-order path in layout units becomes a longer or shorter real swipe distance on a bigger or smaller screen.
- Jump-distance alert threshold — any traversal segment longer than this (in layout units) is drawn red on both the phone diagram and the order strip below it, so large focus jumps are easy to spot at a glance.
- Order strip — the horizontal row of numbered nodes is the DOM order laid out as a timeline; the bar under each connector is that step's jump distance, so a badly shuffled order shows up as a jagged skyline instead of a flat line.
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.