If your layout uses CSS reordering, some users will experience your UI in a different sequence than what they see. Fix it by aligning the DOM with the meaningful visual order.
Fast checklist
Tab through the UI with Tab / Shift+Tab and watch the focus ring: does it move in a predictable visual path?
Don’t use CSS order (flexbox) or grid placement to change the semantic order of interactive elements.
Keep DOM order meaningful: the DOM should match the “reading order” and the primary left-to-right/top-to-bottom visual scan.
Avoid positive tabindex (e.g., tabindex="5"): it creates hidden focus-order rules and is easy to break over time. Prefer natural DOM order.
Responsive layouts: reflow into columns, but keep the DOM order stable. If you must change order between breakpoints, consider rendering separate DOM blocks per breakpoint (with care) rather than reordering the same elements.
Test linear reading: use a screen reader or a “reader mode” style linearization to confirm the narrative still makes sense.
Common failure modes
Cards visually re-ordered: “Sort by” UI changes the look, but focus still follows the original DOM, causing visual jumps.
Two-column forms: labels appear to the left of inputs, but DOM order is column-by-column rather than row-by-row.
Sticky sidebars: the sidebar is visually on the right but appears first in DOM, so keyboard users hit it before the main content.