In plain English
A screen reader reads your page in the order the content appears in the code, not where it sits on screen. Usually those match. But modern CSS can rearrange things visually, so a “sale” badge that appears before a price on screen might come after it in the code, or a sidebar might be read in the middle of the article. When the order carries meaning, the code order has to be right.
The same thing matters when the page reflows to one column on a phone: it stacks in code order.
Who this is for
- Screen-reader users, who experience the page strictly in code order.
- Mobile users, when a multi-column layout collapses to a single column.
How to check and fix it yourself
Two quick tests: read the page with a screen reader and see if anything is out of order, or disable CSS (or heavily zoom) and check the raw content still reads logically. If not, fix the source order rather than nudging it with CSS.
Good: HTML in reading order; CSS only styles it.
Bad: content placed with order/absolute positioning so code order is jumbled.Where we can help
Out-of-order reading is invisible until you test with a screen reader, which is exactly what we do in an audit. We flag any section that reads in the wrong order and point to the source-order fix. It sits alongside structure issues on the common failures list and in a self-check.