WCAG 2.2 · Level A · WahrnehmbarBarrierefreiheit als Cloud-Service
1.3.1 Info und Beziehungen
Wenn ein Text auf einer Webseite wie eine Überschrift aussieht, muss er im Code auch eine Überschrift sein. Wenn etwas aussieht wie eine Liste, muss es im Code auch eine Liste sein. Wenn zwei Dinge zusammengehören, muss diese Beziehung auch im Code erkennbar sein.
Auf einen Blick
Was bedeutet dieses Kriterium?
Kurz gesagt
Struktur muss im Code stehen, nicht nur im Design
Aufwand
Mittel umzusetzen, mittel erledigt
Betrifft Rolle
Entwicklung, Redaktion
Konformitätsstufe
Level A
EN 301 549
Abschnitt 9.1.3.1 · BITV 2.0 · BFSG
Verständlich erklärt
Was heißt 1.3.1 für die Praxis?
Wenn ein Text auf einer Webseite wie eine Überschrift aussieht, muss er im Code auch eine Überschrift sein. Wenn etwas aussieht wie eine Liste, muss es im Code auch eine Liste sein. Wenn zwei Dinge zusammengehören, muss diese Beziehung auch im Code erkennbar sein.
Der Grund: Sehende Menschen erkennen Struktur über optische Hinweise — größere Schrift, Einrückungen, Farben. Blinde Menschen oder Nutzer von Hilfsprogrammen haben diese optischen Hinweise nicht. Sie brauchen die Struktur als Information im Code.
HTML bietet dafür die passenden Elemente: h1 bis h6 für Überschriften, ul und li für Listen, table für Tabellen, label für Formularfelder. Wer diese Elemente korrekt einsetzt, erfüllt das Kriterium fast automatisch.
Wer ist betroffen?
Ein Alltagsbeispiel
Sandra navigiert blind durch eine Nachrichtenseite. Ihr Screenreader kann normalerweise zwischen Überschriften springen — sie hört die Überschriften nacheinander und entscheidet, welcher Artikel sie interessiert. Aber diese Seite hat keine echten Überschriften: Die Texte sind nur optisch fett gedruckt und größer. Für Sandra ist die Seite ein einziger langer Fließtext ohne Gliederung. Sie muss sich Satz für Satz durcharbeiten, um zu finden, was sie sucht.
Betroffen sind insbesondere: Blinde Menschen, Menschen mit kognitiven Einschränkungen, Menschen, die per Tastatur navigieren, Suchmaschinen.
Die Lösung
So setzen Sie es richtig um
Nutzen Sie HTML semantisch: Überschriften sind <h1> bis <h6>, Listen sind <ul> oder <ol>, Tabellen sind <table> mit <th> für Kopfzeilen, und Formularfelder sind mit <label> verknüpft.
Ein einfacher Test: Wenn Sie alle CSS-Stile ausschalten — ergibt die Seite dann noch eine sinnvolle Struktur? Sehen Sie klare Überschriften, Listen und Formulare? Wenn ja, ist die Struktur im HTML verankert. Wenn nicht, haben Sie ein Problem: Ihre Struktur lebt nur im Design, nicht im Code.
Umsetzung
Schritt für Schritt
Konkrete Anleitung zur praktischen Umsetzung dieses Kriteriums.
- 1
Überschriften semantisch auszeichnen
Jede Seite braucht eine <h1>-Überschrift (der Hauptitel). Darunter folgen <h2> für große Abschnitte, <h3> für Unterabschnitte usw. Wichtig: Ebenen nicht überspringen. Nach <h2> kommt <h3>, nicht <h5>. Und nutzen Sie Überschriften nur für echte Gliederungselemente — nicht nur, weil der Text groß aussehen soll.
- 2
Listen als Listen kennzeichnen
Wenn Sie mehrere Punkte auflisten, nutzen Sie <ul> (ungeordnet) oder <ol> (geordnet) mit <li> für jeden Eintrag. Nicht: <div>- Punkt 1</div><div>- Punkt 2</div>. Screenreader sagen bei einer echten Liste: 'Liste mit 5 Einträgen' — das hilft bei der Orientierung.
- 3
Tabellen mit Kopfzeilen versehen
Echte Tabellen (mit Daten) brauchen <th>-Elemente für Spalten- und Zeilenüberschriften. Mit scope="col" oder scope="row" machen Sie die Beziehung eindeutig. Tabellen sollten nicht für Layout verwendet werden — das ist seit 15 Jahren veraltet.
- 4
Formularfelder mit Labels verknüpfen
Jedes <input>, <textarea> oder <select> braucht ein zugehöriges <label>. Verbinden Sie beide über das for-Attribut (<label for="email">) und ein passendes id-Attribut am Feld (<input id="email">). Screenreader lesen dann beim Fokus das Label vor.
- 5
Gruppierungen kenntlich machen
Wenn mehrere Formularfelder zusammengehören (z.B. 'Lieferadresse' mit mehreren Feldern), gruppieren Sie sie in einem <fieldset> mit <legend>. Bei Navigation: <nav>. Bei Hauptinhalt: <main>. Diese semantischen Elemente sind wie Überschriften für Hilfsprogramme.
Praxisbeispiele
So nicht — sondern so
So nicht
<div class="heading-large">Kontakt</div> <div>Telefon: 0800 123 456</div> <div>E-Mail: info@beispiel.de</div>
Sondern so
<h2>Kontakt</h2> <dl> <dt>Telefon</dt> <dd>0800 123 456</dd> <dt>E-Mail</dt> <dd>info@beispiel.de</dd> </dl>
Warum?
Im schlechten Beispiel ist 'Kontakt' visuell eine Überschrift, aber im Code nur ein gewöhnlicher Text-Container. Screenreader finden sie nicht beim Überschriften-Sprung. Außerdem ist die Liste der Kontaktdaten nicht als Struktur erkennbar. Die korrekte Version nutzt <h2> für die echte Überschrift und eine Definitionsliste (<dl>) für die Telefon- und E-Mail-Daten.
So nicht
<p>• Startseite</p> <p>• Produkte</p> <p>• Kontakt</p>
Sondern so
<ul> <li>Startseite</li> <li>Produkte</li> <li>Kontakt</li> </ul>
Warum?
Absätze mit Aufzählungszeichen sehen aus wie eine Liste, sind aber im Code drei unabhängige Absätze. Screenreader können die Zusammengehörigkeit nicht erkennen. Eine echte <ul>-Liste wird vorgelesen als 'Liste mit 3 Einträgen' — der Nutzer weiß sofort, worum es sich handelt.
Typische Fehler
Das wird häufig falsch gemacht
Diese Fehler sehen wir in der Praxis besonders oft — und wie Sie sie vermeiden.
Überschriftenebenen überspringen
Nach <h1> direkt zu <h3> springen, um die Abstände kleiner aussehen zu lassen. Das verwirrt Screenreader-Nutzer, die sich an der Hierarchie orientieren. Lösung: Stile anpassen, nicht Struktur.
Mehrere <h1> pro Seite
Jede Seite sollte genau eine <h1> haben — den Haupttitel. Mehrere <h1> verwirren Nutzer über die Hauptstruktur der Seite.
Überschriften nur für großen Text
Ein Satz ist nicht automatisch eine Überschrift, nur weil er groß aussieht. Überschriften sollten echte Abschnitte einleiten. Wenn Sie nur großen Text wollen, nutzen Sie CSS-Stile auf einem <p>.
Placeholder statt Label
Ein Formularfeld mit placeholder="E-Mail" hat kein Label. Sobald der Nutzer etwas eingibt, verschwindet der Placeholder — Screenreader-Nutzer wissen dann nicht mehr, welches Feld sie gerade ausfüllen.
Selbst prüfen
So testen Sie dieses Kriterium
Mit diesen Methoden können Sie selbst prüfen, ob Ihre Webseite das Kriterium erfüllt.
CSS deaktivieren
In Chrome DevTools: 'Rendering' → 'Emulate CSS media feature' → oder einfach alle Styles ausschalten. Ist die Seite noch strukturiert lesbar? Erkennen Sie Überschriften, Listen, Formulare? Wenn ja, ist die Semantik gut.
Überschriften-Sprung mit Screenreader
Mit VoiceOver: Rotor öffnen und 'Überschriften' wählen. Sie sehen alle Überschriften der Seite als Liste. Ergibt die Liste eine sinnvolle Seitengliederung? Fehlen wichtige Abschnitte?
HTML validieren
Der W3C Validator zeigt strukturelle Fehler: Falsch verschachtelte Elemente, fehlende Attribute, doppelte IDs. Auch wenn nicht jeder Validierungsfehler ein WCAG-Verstoß ist, helfen sie bei der Qualitätssicherung.
Häufige Fragen
Fragen und Antworten
Darf ich Überschriften-Ebenen nach Design-Wunsch wählen?▾
Was ist mit einem <div> mit role="heading" aria-level="2"?▾
Brauchen Seitenbereiche auch Überschriften?▾
Kann ich Layout-Tabellen noch verwenden?▾
Mein CMS erzeugt <div>s statt semantischem HTML. Was tun?▾
Verwandte Kriterien
Weiterführende Erfolgskriterien
Diese Kriterien stehen in engem Zusammenhang mit 1.3.1 und sollten gemeinsam betrachtet werden.