This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
Why must the order of content in the code be correct?
The order in the code has to be right, because screen readers read out a page in exactly this order — regardless of how the content is arranged on screen. If the price comes before the product name in the code, a blind visitor hears "€89" first and doesn't know what it's for. The visible order and the code order have to match.
Two views of the same page
Every website exists twice: once as the visible design on screen, and once as code, where the content sits one after another. Modern design techniques can decouple the two — an element that sits right at the bottom in the code can appear visually at the top left. For sighted visitors, that's invisible. A screen reader, though, strictly follows the code. An example: your price list shows three packages side by side, but in the code, all three titles come first, then all three prices, then all three descriptions. The blind visitor hears "Basic, Comfort, Premium, €29, €59, €99" — and can no longer match the prices to the packages.
How our measurement engine checks the order
The axe-core testing tool detects individual technical signals that point to a disrupted order — such as markup that pulls elements out of the reading flow. Whether the reading order of a specific page makes sense content-wise, however, is something a machine can only judge to a limited extent in principle: that takes understanding the content. Our measurement engine follows its principle here that an unremarkable pass is no free pass — whatever the automation can't reliably decide, the report marks as "manual review". At the Gold Standard level, an auditor has the page output in code order and judges whether the content still makes sense that way.
Examples
Order changed by CSS
<div style="display:flex; flex-direction:column-reverse">
<p>Schritt 2: Termin bestätigen</p>
<p>Schritt 1: Termin wählen</p>
</div><div>
<p>Schritt 1: Termin wählen</p>
<p>Schritt 2: Termin bestätigen</p>
</div>Read-out programs read the source text in its order. What is flipped optically arrives the wrong way around.
- Ask your agency to review your most important pages once with no styling — just in code order.
- Check price lists and comparison tables especially closely: that's where the design most often separates information that belongs together.
- When redesigning, make sure content is inserted in the code where it belongs content-wise — not wherever is technically convenient.
- Test with the Tab key after major design changes: if the highlight jumps all over the place, the code order is usually wrong too.
- Include the reading order as an acceptance criterion in contracts with your agency.
