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.
FAQ
How do I find incorrect headings on my page?
Have the heading structure displayed — browser extensions and screen readers can do this. If subheadings you see on the page are missing there, they're only styled to look like headings.
May I skip heading levels?
The levels should reflect the content's structure. A jump from h2 to h4 leaves a level of the structure ending in nothing — technically possible, but misleading for orientation.
What does "identify input purpose" mean?
Fields that ask for the user's personal data — name, email, phone number — should state their purpose in a machine-readable way. That lets assistive technology and browsers pre-fill them sensibly or add icons.