WCAG 1.3.1 Info und Beziehungen

Aktualisiert am 14. Oktober 2026 · Lesezeit: 3 Min.

Stufe: A · WCAG 2.0
EN 301 549: 9.1.3.1
Was der Check prüft: Teilweise automatisch: Die ganze Seite ist für Screenreader ausgeblendet, Selbst gebaute Menüs oder Listen sind fehlerhaft aufgebaut, Selbst gebaute Menüpunkte oder Tabs stehen außerhalb ihrer Gruppe, Eine Liste aus Bezeichnungen und Werten ist falsch aufgebaut, Eine Bezeichnung oder ein Wert steht außerhalb ihrer Liste, Eine Liste ist fehlerhaft aufgebaut, Ein Listeneintrag steht außerhalb einer Liste, Einige Überschriften sind nur fetter oder großer Text, Der Titel einer Tabelle steht in einer Tabellenzelle, Große Tabellen haben Zellen ohne Überschriften, Tabellenzellen verweisen auf falsche Überschriften, Tabellenüberschriften beschreiben keine Daten
Offizieller Text: Understanding 1.3.1 Info and Relationships (W3C, auf Englisch)

Das Erfolgskriterium 1.3.1 sorgt dafür, dass die Struktur, die Menschen sehen — Überschriften, Listen, Tabellen, Formular-Labels, Gruppen von Optionen —, auch im Code steht. Screenreader, Sprachsteuerung und Lesemodi nutzen diese Struktur, um eine Seite vorzulesen und darin zu navigieren. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.1.3.1). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, müssen programmatisch ermittelbar oder als Text verfügbar sein. In HTML heißt das:

Überschriften verwenden h1–h6, nicht nur fetten, großen Text;
Listen verwenden ul, ol oder dl, mit den Listeneinträgen direkt darin;
Datentabellen verwenden th für Überschriften (und scope oder headers bei komplexen Tabellen) sowie eine Beschriftung (caption), wenn die Tabelle einen Titel hat;
Formularfelder haben im Code verbundene Labels (label for), und zusammengehörige Felder wie Radiobuttons sind gruppiert (fieldset und legend);
Informationen, die durch Formatierung vermittelt werden — ein Pflichtfeld mit rotem Sternchen, ein hervorgehobener aktueller Schritt —, sind auch als Text oder im Code verfügbar.

Typische Fehler in Onlineshops

Abschnittstitel wie „Bestseller“ oder „Beschreibung“, die wie Überschriften gestaltet, aber als div oder fettes p codiert sind;
Größen- und Spezifikationstabellen aus divs oder ohne Kopfzellen;
Felder im Checkout, deren sichtbares Label im Code nicht mit dem Feld verbunden ist;
Zahlungs- und Versandoptionen als Radiobuttons ohne Gruppenbeschriftung;
„Pflichtfeld“ nur als rotes Sternchen, das nicht im Label steht;
ARIA-Rollen wie list oder menu ohne die erforderlichen Kind-Rollen.

So prüfen Sie es

Automatisch: Unser Checker findet viele Strukturfehler: Listen und Definitionslisten mit falschen Kindelementen, Datenzellen ohne Überschriften, fette Absätze als Überschriften, unechte Tabellenbeschriftungen, ARIA-Rollen ohne erforderliche Eltern- oder Kindelemente und aria-hidden auf dem body (Regeln list, listitem, td has header, p as heading und verwandte). Ob etwas nur wie eine Überschrift oder Gruppe aussieht, kann er nicht erkennen — ein fehlerfreier Scan ist also kein Beweis.

Manuell: Nutzen Sie eine Überschriften-Gliederung (eine Browsererweiterung oder die Überschriftenliste des Screenreaders) und vergleichen Sie sie mit dem, was Sie sehen. Prüfen Sie jede Tabelle, jedes Formular und jede Liste im Code oder mit einem Screenreader. Stellen Sie sicher, dass jeder visuelle Hinweis wie „Pflichtfeld“ auch als Text vorhanden ist.

So beheben Sie es

Verwenden Sie im Theme und im Editor echte Überschriftenelemente; halten Sie eine logische Reihenfolge ein (ein h1, dann Abschnitte mit h2).
Bauen Sie Spezifikationstabellen mit table, th und caption.
Geben Sie jedem Feld ein sichtbares label; gruppieren Sie Radiobutton- und Checkbox-Gruppen mit fieldset und legend.
Schreiben Sie „Pflichtfeld“ in den Label-Text oder ergänzen Sie aria-required und erklären Sie das Sternchen.
Bevorzugen Sie native HTML-Elemente gegenüber ARIA-Rollen.

Häufige Fragen

Verlangt WCAG 1.3.1 eine korrekte Überschriftenreihenfolge?

1.3.1 verlangt, dass Text, der wie eine Überschrift aussieht, auch als Überschrift ausgezeichnet ist. Übersprungene Ebenen (h2 auf h4) sind für sich genommen kein Verstoß gegen 1.3.1, aber eine logische Reihenfolge macht die Navigation viel leichter und ist gute Praxis.

Wie teste ich WCAG 1.3.1?

Führen Sie eine automatische Prüfung auf Strukturfehler bei Listen, Tabellen und ARIA durch und vergleichen Sie dann die sichtbare Seite mit ihrem Code oder einem Screenreader: Jede Überschrift, Liste, Tabellenüberschrift, jedes Formular-Label und jede Gruppe muss im Markup stehen.

Reicht ein Platzhalter als Formular-Label?

Er ist keine zuverlässige Beschriftung: Er verschwindet bei der Eingabe und wird nicht immer vorgelesen. Verwenden Sie ein sichtbares label-Element, das im Code mit dem Feld verbunden ist; auch 3.3.2 Beschriftungen (Labels) oder Anweisungen verlangt sichtbare Labels.

Sind Layout-Tabellen ein Verstoß?

Tabellen für das Layout zu verwenden, wird nicht empfohlen, ist aber an sich kein Verstoß, solange sie keine Kopfzellen, Beschriftungen oder Zusammenfassungen verwenden. Datentabellen brauchen dagegen echte Kopfzellen.