Screen Reader Focus Order Explorer

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 simulator renders a real phone layout in 3D — 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, and the live "order efficiency" readout drops. A reading-speed slider models realistic per-element dwell time from word count, 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.