Why document order still matters

Screen readers and keyboard navigation both rely on the order of elements in the HTML source. A screen reader announces content as it appears in the document, using elements like headings, links, and lists to add meaning. Keyboard users tab between focusable elements—links and form fields—in that same document order. That makes a well-structured source the foundation of an accessible site.

The trouble starts when CSS is used to move things around visually. If a layout change isn't reflected in the source, users who don't rely on visual scanning can end up with a confusing experience.

The gap between what you see and what you get

A typical navigation bar is a list of links styled with Flexbox into a horizontal row. If you tab through such a bar, focus moves left to right in the order the links appear in the HTML. That's the expected, logical flow for English-language reading.

Now suppose you're asked to move Contact Us, the second item in the source, to the end of the bar. Using Flexbox's order property achieves the visual change, but the keyboard and screen reader experience doesn't match. Tabbing through the example jumps to the final item and then back, because assistive technology still treats it as the second item in the document. Visually it's last; semantically it remains second. The fix is straightforward: change the order of the links in the source instead of simulating the change with CSS.

CSS properties that can break logical order

Any layout technique that gives you control over element placement has the potential to introduce this problem. The most common culprits are:

  • position: absolute, which visually removes an item from its place in the flow.
  • The order property in both Flexbox and Grid layout.
  • row-reverse and column-reverse values for flex-direction.
  • The dense value for grid-auto-flow.
  • Positioning Grid items by line number, line name, or grid-template-areas.

The problem isn't theoretical. A CSS Grid layout that positions items by line number without regard for their source order can make tab focus jump erratically across the page, which becomes genuinely disorienting on longer pages.

How to catch reordering issues

A screenshot of the Accessibility Insights Tool demonstrating the confusing order of items.

Testing keyboard navigation is the quickest check. Tab through the page and ask whether you can reach everything and whether focus moves in a predictable path. For a visual demonstration of the issue, the Tab Stop checker inside Accessibility Insights, a Chrome extension, shows exactly where focus jumps in a layout that uses CSS Grid reordering.

Reordering across breakpoints

When you have a single layout, matching source order to visual order is usually manageable. Responsive design complicates things: it may feel correct to place an element at the bottom of the layout on a small screen, even though it sits higher up in the source. There isn't yet a robust solution that handles this consistently. In most cases, a mobile-first approach keeps source and layout aligned, because the content priorities for small screens often hold up across larger viewports. The important thing is to be aware of the risk and to verify, at every breakpoint, that the resulting keyboard and screen reader experience isn't jarring.