Screen Reader Focus Order Map (2D)

Every mobile screen has two orders layered on top of it: the order sighted users scan visually, and the order a screen reader like VoiceOver or TalkBack walks through the underlying accessibility tree. This top-down 2D diagram renders a real phone layout — header, hero image, title, body text, a call-to-action and a three-tab bottom nav — and lets you shuffle the source (DOM) order away from the visual layout to see exactly what WCAG 2.4.3 "Focus Order" violations feel like: the focus marker leaps erratically across the screen, the traversal path grows longer than the ideal Z-pattern path, the live "order efficiency" readout drops, and the horizontal order strip turns jagged. A reading-speed slider models realistic per-element dwell time from word count, a phone-size slider converts the abstract path length into a real swipe distance in centimetres, and one button restores the DOM order to match the visual layout — the fix real engineers apply when an audit tool flags this exact bug.