Ein Kriterium der Stufe A, das verlangt, visuelle Struktur (Überschriften, Listen, Tabellenköpfe, beschriftete Felder) semantisch in HTML oder ARIA abzubilden statt sie nur optisch nachzuahmen.

Was sind typische Verstöße gegen 1.3.1?

Fetter Text statt einer echten Überschrift, Layout-Tabellen ohne korrekte Kopfzellen oder eine sichtbare Beschriftung, die nicht programmatisch mit ihrem Feld verknüpft ist.

Wie wird 1.3.1 geprüft?

Teilweise automatisiert – Werkzeuge finden fehlende Tabellenköpfe oder nicht verknüpfte Beschriftungen –, doch ob die visuelle Struktur vollständig im Markup abgebildet ist, erfordert oft menschliche Prüfung.

Erfolgskriterien

WCAG 1.3.1 Info und Beziehungen

Erfolgskriterium 1.3.1 verlangt, dass Informationen, Struktur und Beziehungen, die durch visuelle Darstellung vermittelt werden, auch programmatisch bestimmt werden können, oder als Text verfügbar sind. Es ist ein Kriterium der Stufe A unter Richtlinie 1.3 (Anpassbar) – und in der Praxis das mit Abstand breiteste Kriterium in ganz WCAG, das einen riesigen Anteil gängiger struktureller HTML-Fehler abdeckt.

Was "programmatisch bestimmt" bedeutet

Ein sehender Nutzer nimmt Struktur visuell wahr: Fetter Text impliziert Betonung, Einrückung impliziert eine Liste, Nähe impliziert, dass eine Formularbeschriftung zu einem Feld gehört, ein umrandetes Zellenraster impliziert eine Datentabelle. 1.3.1 verlangt, dass genau diese Struktur im Markup selbst kodiert wird – nicht nur durch Styling impliziert –, damit assistive Technologie sie ebenfalls wahrnehmen kann.

Die Fehlermuster, die dieses Kriterium abdeckt

1.3.1 ist ungewöhnlich breit, weil "Struktur und Beziehungen" mehrere unterschiedliche Muster umfasst:

Überschriften, die die tatsächliche Dokumentstruktur nicht widerspiegeln oder Ebenen überspringen – siehe Falsche Überschriftenreihenfolge
Datentabellen ohne echte Kopfzellen, die jede Datenzelle mit ihrer Bedeutung verknüpfen – siehe Fehlende Tabellenüberschriften
Landmarken-Bereiche, die fehlen oder doppelt vorhanden sind, ohne strukturelle Karte der Seite – siehe Landmarken- und Bereichsprobleme
Präsentationsbezogenes HTML (<center>, <font>, das align-Attribut), das visuelles Styling direkt in strukturelles Markup einbettet, statt beides zu trennen – siehe Veraltetes präsentationsbezogenes Markup
Listen, die visuell wie Listen aussehen (Gedankenstriche, als reiner Text getippte Zahlen), aber nicht als <ul>/<ol>/<li> ausgezeichnet sind
Formularbeschriftungen, die nur durch visuelle Nähe zugeordnet sind, ohne programmatische <label for>-Verknüpfung

Warum ein Kriterium so viel Boden abdeckt

WCAG hätte "Überschriften", "Tabellen", "Landmarken" und "Listen" in separate Kriterien aufteilen können – stattdessen sind sie unter einem Prinzip vereint: Lassen Sie Styling allein nicht Bedeutung tragen, die Markup tragen sollte. Wenn Sie sich ein mentales Modell für 1.3.1 merken: Immer wenn Sie versucht sind, Struktur allein über CSS zu vermitteln (größerer Text zur Betonung, Einrückung für Hierarchie, Rahmen zur Gruppierung), fragen Sie, ob es ein semantisches HTML-Element gibt, das diese Aufgabe stattdessen übernehmen sollte.

Offizielle Referenzen

Häufige Fragen

Was ist WCAG 1.3.1?: Ein Kriterium der Stufe A, das verlangt, visuelle Struktur (Überschriften, Listen, Tabellenköpfe, beschriftete Felder) semantisch in HTML oder ARIA abzubilden statt sie nur optisch nachzuahmen.
Was sind typische Verstöße gegen 1.3.1?: Fetter Text statt einer echten Überschrift, Layout-Tabellen ohne korrekte Kopfzellen oder eine sichtbare Beschriftung, die nicht programmatisch mit ihrem Feld verknüpft ist.
Wie wird 1.3.1 geprüft?: Teilweise automatisiert – Werkzeuge finden fehlende Tabellenköpfe oder nicht verknüpfte Beschriftungen –, doch ob die visuelle Struktur vollständig im Markup abgebildet ist, erfordert oft menschliche Prüfung.