WCAG 1.3.1: Info und Beziehungen

Alles, was optisch Struktur ausdrückt – Überschriften, Listen, Tabellen, Feldgruppen, Hervorhebungen –, muss diese Struktur auch programmatisch transportieren: im Markup, nicht nur im Styling. 1.3.1 ist das Herzstück des semantischen HTML und in Audits das am häufigsten verletzte Kriterium überhaupt. (Englisch: Info and Relationships.)

Was verlangt das Kriterium?

Wenn Sehende eine Beziehung erkennen, müssen Maschinen sie auslesen können:

• Eine Überschrift ist ein <h1>–<h6>, kein fettes <div>.
• Eine Aufzählung ist eine <ul>/<ol>, keine Absätze mit Bindestrichen.
• Eine Datentabelle hat <th> mit scope, keine Layout-Zellen.
• Ein Formularfeld hat ein verknüpftes <label>, zusammengehörige Felder stehen in <fieldset>/<legend>.
• Fehlermeldungen und Hinweise sind per aria-describedby mit ihrem Feld verbunden, nicht nur daneben platziert.

Wen betrifft es besonders?

Alle, die die Seite nicht flächig sehen: Screenreader-Nutzer navigieren in Struktur-Sprüngen – ohne echte Überschriften und Listen gibt es nichts zu springen. Auch Braillezeilen, Reader-Modi und Suchmaschinen lesen die programmatische Struktur, nie die Optik.

Richtig & falsch im Code

<!-- Falsch: Struktur nur im Styling -->
<div class="heading-2">Lieferadresse</div>
<div>– Straße eingeben</div>
<div>– PLZ eingeben</div>

<!-- Richtig: Struktur im Markup -->
<h2>Lieferadresse</h2>
<ul>
  <li>Straße eingeben</li>
  <li>PLZ eingeben</li>
</ul>

<!-- Richtig: Beziehung Feld ↔ Label ↔ Fehlermeldung -->
<label for="plz">Postleitzahl</label>
<input id="plz" name="plz" autocomplete="postal-code"
       aria-describedby="plz-error" aria-invalid="true" />
<p id="plz-error">Die Postleitzahl muss aus fünf Ziffern bestehen.</p>

Der komplette Werkzeugkasten steht im Bereich Semantisches HTML – 1.3.1 ist im Grunde dessen Rechtsgrundlage.

So testest du es

1. Automatisch: axe findet fehlende Labels, kaputte Tabellen und Listen-Imitate zuverlässig.
2. HeadingsMap / Outline: Bildet die Überschriften-Struktur den Inhalt ab – ohne Lücken und Mogel-Ebenen?
3. Screenreader-Gegenprobe: Mit NVDA durch Formulare und Tabellen – wird zu jedem Feld das Label, zu jeder Zelle der Spaltenkopf angesagt?
4. CSS-aus-Test: Stylesheet deaktivieren – bleibt die Seite eine gegliederte, verständliche Struktur?

Verwandte Themen

• Was ist semantisches HTML? – das Fundament hinter dem Kriterium
• 1.3.2 Bedeutungstragende Reihenfolge – der Nachbar für die Reihenfolge
• Landmarks & Dokument-Outline