Reading Order

Reading order is the sequence in which assistive technologies traverse the content of a web page. This sequence follows the HTML source code (the DOM), not the visual layout. When CSS rearranges elements on screen, the reading order can diverge from what the user sees.

Three columns display left to right on your screen. A screen reader traverses them in the same direction. Add flex-direction: row-reverse and the display reverses. The screen reader, however, continues in HTML order.

The sighted user sees A-B-C. The screen reader user hears C-B-A.

#Why CSS doesn't change reading order

A screen reader doesn't read pixels. It traverses the accessibility tree, built from the DOM. The properties order, flex-direction: row-reverse, or explicit grid placement modify visual position. The DOM itself doesn't move.

WCAG criterion 1.3.2 (level A) states it plainly: when the order of content affects its comprehension, the correct sequence must be programmatically determinable. Your source code must reflect a logical order, independent of the CSS applied.

Technique C27 summarizes the rule in one sentence: make the DOM order match the visual order.

#The classic trap: fixing with tabindex

When tab order jumps around after a CSS rearrangement, the reflex is to add positive tabindex values to force the order.

<!-- Don't do this -->
<div tabindex="3">Visually first</div>
<div tabindex="1">Visually third</div>
<div tabindex="2">Visually second</div>

Positive tabindex creates a parallel focus order that conflicts with the DOM. And it only fixes keyboard navigation: a screen reader in reading mode continues to follow the order of your source code.

The correct fix: restructure your HTML so the source order matches your desired visual order. If your layout prevents this, the layout needs rethinking.

#What about reading-flow?

The CSS Working Group is working on reading-flow, a property that would synchronize reading order with flex or grid layout. Chrome 137+ already supports it, but other browsers haven't followed.

For now, the rule remains the same.

#In summary

HTML dictates reading order. CSS changes only the display. Before visually reorganizing your components, disable styles and verify that your page still reads in a coherent order.

Back to glossary
Share this article

Learn more

Document structure

Document structure is the logical organization of a web page through hierarchical headings (h1 to h6) and semantic HTML5 tags. Screen readers use them to build a navigable table of contents and allow their users to jump directly to the desired section.

Tab order

Tab order is the sequence in which interactive elements on a page receive focus when the Tab key is pressed. By default, it follows the order of the HTML code. If this order does not match the visual order of the page, keyboard users become disoriented.

HTML Semantics

HTML semantics means choosing HTML elements according to their meaning, not their appearance. A <nav> tells browsers and screen readers "this is a navigation", whereas a <div> conveys no information. It's the foundation of code-side accessibility: well-structured HTML makes content understandable without JavaScript or extra ARIA attributes.