This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Structure and reading order: why appearance and code must match
Whatever's visually recognisable as a heading, list, or table must be marked up as such in the code too. A bold paragraph isn't a heading to a screen reader, and a list aligned with spaces isn't a list. On top of that, the order in the code must match the logical reading order.
- The practical test is the heading list: anyone who calls it up gets a table of contents for the page. If the headings are missing, or only styled to look like headings, the list is empty — and the page has to be listened through from top to bottom.
- Reading order breaks apart especially in modern layouts: an element pulled upward by a CSS grid sits further down in the code. Sighted users see it first, screen reader users last. That's why our check compares the visual order to the DOM order.
- Form fields belong here too: an input field needs a programmatically linked label. Text next to it that just looks like a label visually isn't enough.
