Reading Order
Definition
A screen reader, a braille display, a browser reading mode and a translation tool all work from the document's underlying sequence, not from where things appear on screen. In HTML that sequence is the DOM order, which is the order you wrote the elements in. CSS can rearrange the picture without touching it: the order property in flexbox, row-reverse and column-reverse, explicit grid placement, absolute positioning, floats. WCAG covers this in success criterion 1.3.2 Meaningful Sequence, at Level A — where the sequence of content affects its meaning, a correct reading sequence has to be programmatically determinable. Note the condition. Reordering two independent cards is harmless; reordering a heading away from the text it introduces is not.
Why It Matters
A mismatch produces a page that is perfectly usable by sight and incoherent by ear. The classic case is a two-column layout where the sidebar comes first in the source and sits on the right in the design: the listener hears 'Related links, Newsletter signup, About the author' before a single word of the article. Keyboard focus follows the same source order, so the same mistake makes the cursor jump from top-left to bottom-right and back. Both faults are invisible in every screenshot and every design review, and both are usually fixed by moving the markup and letting CSS place it, rather than the other way round.
How It Works
To check an HTML page, read the DOM linearly — disable CSS in the browser, or select all and paste into a plain text editor, and see whether what you get still reads as a document. Where visual position and source order must differ, grid placement is generally safer than the flexbox order property, because it lets you keep the markup in a sensible sequence and position it by area. Content moved with absolute positioning stays in its source location for reading purposes no matter where it lands on screen. PDFs work on the same principle with different plumbing: the reading order comes from the tag tree, which you inspect and reorder in Acrobat's Tags and Reading Order panels. An untagged PDF has no defined order at all, so the reader guesses, and multi-column pages typically come out interleaved line by line.
Real-World Example
A consultancy publishes a briefing at briefing.99helpers.site using a two-column grid. In the source, the 'Further reading' box is written first because it was easier to float it right, so the page opens by listing six links before the headline. Moving the box after the article in the source and placing it with grid-area puts the reading order right while the layout stays identical. The same document is also offered as a PDF, and there the fix is different: the export produced an untagged file, so the tags are added in Acrobat and the reading order corrected before the file is uploaded to 99helpers alongside the HTML.
Common Mistakes
- ✕Using the flexbox order property to fix a layout — the visual position moves, the reading order and the focus order do not, so the two drift apart
- ✕Assuming a PDF exported from a design tool has a reading order — most are untagged, and an untagged file is read in whatever sequence the software guesses
- ✕Putting a cookie banner or a chat widget last in the source because it is positioned over the page — a screen reader meets it at the end, long after it has blocked everything
- ✕Checking the visual layout only — the test that matters is reading the page with the stylesheet switched off
Related Terms
Tab Order
Tab order is the sequence in which pressing Tab moves focus through a page's interactive elements. By default it follows the order those elements appear in the HTML source.
Semantic HTML
Semantic HTML means using the element that matches the meaning of the content — button, nav, h2, label, table — rather than styling a generic div or span to look the part.
Tagged PDF
A tagged PDF carries a hidden tree of structure elements — headings, paragraphs, lists, tables, figures — running in parallel with the visible page. Tags are what let software tell a heading from a caption.
Document Outline
A document outline is the nested hierarchy a page's headings describe — its table of contents, implied rather than printed. Assistive technology builds navigation directly from it.
Generated HTML
Generated HTML is markup produced by a program or a model rather than typed by a person. From a browser's point of view it is indistinguishable from hand-written HTML, and a static host serves it the same way.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →