Struktur und Lesereihenfolge: warum Aussehen und Code übereinstimmen müssen

Was optisch als Überschrift, Liste oder Tabelle erkennbar ist, muss auch im Code so ausgezeichnet sein. Ein fett gesetzter Absatz ist für einen Screenreader keine Überschrift, und eine mit Leerzeichen ausgerichtete Aufzählung ist keine Liste. Zusätzlich muss die Reihenfolge im Code der sinngemäßen Lesereihenfolge entsprechen.

Was dazu geprüft wird

5 Prüfpunkte aus dem WCAG 2.2, Leitlinie 1.3 — die Liste stammt aus dem Messkern, nicht aus diesem Text.

1.3.1 Info und Beziehungen · Stufe A
1.3.2 Bedeutungstragende Reihenfolge · Stufe A
1.3.3 Sensorische Eigenschaften · Stufe A
1.3.4 Ausrichtung · Stufe AA
1.3.5 Eingabezweck bestimmen · Stufe AA

Jeder dieser Punkte steht mit Erklärung in der vollständigen Prüfpunktliste.

Worauf es in der Praxis ankommt

Der praktische Prüfstein ist die Überschriftenliste: Wer sie aufruft, bekommt ein Inhaltsverzeichnis der Seite. Fehlen die Überschriften oder sind sie nur optisch gemacht, ist die Liste leer — und die Seite muss von oben nach unten durchgehört werden.

Die Lesereihenfolge fällt besonders bei modernen Layouts auseinander: Ein Element, das per CSS-Raster nach oben gezogen wird, steht im Code weiter unten. Sehende sehen es zuerst, Screenreader-Nutzer zuletzt. Unser Prüfer vergleicht deshalb die visuelle mit der DOM-Reihenfolge.

Formularfelder gehören ebenfalls hierher: Ein Eingabefeld braucht eine programmatisch verknüpfte Beschriftung. Ein Text daneben, der optisch wie eine Beschriftung aussieht, genügt nicht.

Häufige Fragen

Wie finde ich falsche Überschriften auf meiner Seite?

Lassen Sie sich die Überschriftenstruktur anzeigen — Browser-Erweiterungen und Screenreader können das. Wenn dort Zwischenüberschriften fehlen, die Sie auf der Seite sehen, sind sie nur optisch gemacht.

Darf ich Überschriftenebenen überspringen?

Die Ebenen sollen die inhaltliche Gliederung abbilden. Ein Sprung von h2 auf h4 lässt eine Ebene der Gliederung im Nichts enden — technisch möglich, für die Orientierung aber irreführend.

Was bedeutet „Eingabezweck bestimmen"?

Felder, die persönliche Daten des Nutzers abfragen — Name, E-Mail, Telefonnummer —, sollen ihren Zweck maschinenlesbar nennen. Dann können Hilfsmittel und Browser sie sinnvoll vorbelegen oder mit Symbolen versehen.

Weitere Themen aus Barrierefreiheit

Website prüfen lassen Erst das Prüfverfahren verstehen →