Glossary · Accessibility term
Reading order
Reading order is the sequence content reaches assistive technology in, and it comes from the source rather than from the layout. CSS grid and flexbox can move things around the screen without touching the source, which is what they were designed to do. Both specifications also say in as many words that the reordering is for the visual rendering only. It must not stand in for getting the source order right. CSS is starting to offer a deliberate way to change the order after all, and one browser has shipped it, so treat that as a thing to watch and keep the source order sound in the meantime. WCAG asks less than that. Rule 1.3.2 bites only where the sequence carries meaning, and W3C is explicit that more than one order can be correct and only one of them has to be provided. So the main content and the navigation in either order is fine. Reordering the rows of a table usually is not, because the order of rows is normally carrying something.
In practice
Reading order comes from the document. Visual order comes from CSS. Flexbox ordering, grid placement and absolute positioning can separate the two completely, and doing that is legal and sometimes right. The classic three-column layout, with the article first in the source and the navigation drawn to its left, is the specification's own worked example of a difference it approves of. So is a layout that collapses to a single column on a narrow screen, which presents two visual orders from one source order.
The test is whether the sequence carries meaning, and W3C gives a sharp version of it for HTML. Text is always a meaningful sequence. Tables and ordered lists are meaningful sequences. Unordered lists are not. So reordering the rows of a table or the steps of a numbered list usually changes what they say, and a finding there should name what the new order now claims rather than resting on the element type. Reordering a row of independent cards usually does not, as long as they are not ranked, numbered, or interleaved with one another.
A quick check is to select everything on the page, copy it, and paste it into a plain text editor. What comes out is close to the source order, so if it reads as nonsense the source and the screen have parted company. Treat it as a rough check rather than a verdict, because it shows you the source rather than the accessibility tree, and it will miss anything generated by CSS or reparented by ARIA.
Why it matters
Automated testing reaches very little of this. There is no approved or proposed rule for it in W3C's automated testing set. A tool driving a browser can read the source order and measure where things landed on screen, so it can tell you the two disagree. What it cannot tell you is whether the disagreement changed the meaning, which is the whole of the criterion. The other half is that the CSS specifications are stricter here than WCAG is, and they make the better argument in a code review. A stylesheet that uses ordering to do logical reordering is non-conforming in the CSS Working Group's own words, which is a harder thing to answer than a claim that screen readers get confused.
The other half people forget
Reading order and focus order are different rules. 1.3.2 governs the sequence everything is announced in. 2.4.3 governs the sequence focus moves in, and it is a separate Level A criterion with its own test. One CSS reordering can break either, or both, or neither, because the two rules ask different questions. Check both and write up whichever actually broke.
Where this shows up on the site
Related terms
- DOMThe DOM is the browser's live, in-memory version of your page, a tree of objects it builds by parsing your HTML and then keeps updating as your scripts run.
- Tab orderTab order is the sequence keyboard focus moves through when you press Tab, and it is field vocabulary rather than the standard's word.
- Focus orderFocus order is the sequence focus travels in as you press Tab, and by default it follows the order elements appear in the code rather than the order they appear on screen.
- Semantic HTMLSemantic HTML means using HTML elements for what they mean rather than for how they look.
- Programmatically determinedProgrammatically determined is WCAG's term for information software can read out of the code rather than infer from how the page looks.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.