1.3.1 Info und Beziehungen

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du betrittst ein fremdes Bürogebäude und alle Türschilder, Wegweiser und Stockwerksangaben wären unsichtbar – aber trotzdem da. Genau so fühlt es sich für Menschen an, die mit Screenreadern oder anderen assistiven Technologien arbeiten, wenn Websites nur visuell strukturiert sind.

Sehende Menschen erkennen auf einer Website sofort: Das ist eine Überschrift (größer, fett), das eine Liste (mit Aufzählungszeichen), das ein Formular (Felder mit Beschriftungen). Aber was, wenn diese visuellen Hinweise für dich nicht zugänglich sind?

Das Ziel von Erfolgskriterium 1.3.1 ist es, dass alle Informationen und Beziehungen, die durch die Darstellung vermittelt werden, auch im Code verfügbar sind. So können assistive Technologien die Struktur erkennen und an ihre Nutzer:innen weitergeben – unabhängig davon, wie die Seite aussieht.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret fordert WCAG 1.3.1: Alle Informationen, Strukturen und Beziehungen, die durch die Darstellung vermittelt werden, müssen entweder programmatisch ermittelbar oder als Text verfügbar sein.

Das bedeutet:

Überschriften müssen als echte HTML-Überschriften (h1 bis h6) ausgezeichnet sein – nicht nur größer und fetter gestaltet.

Listen brauchen korrektes Listen-Markup (ul, ol, dl) – nicht nur Bindestriche oder Aufzählungszeichen.

Datentabellen müssen semantisch aufgebaut sein, mit Tabellenköpfen (th), die klar ihren Datenzellen (td) zugeordnet sind.

Formularfelder benötigen programmatisch verknüpfte Beschriftungen, die erklären, was eingegeben werden soll.

Wichtige Bereiche einer Seite (Navigation, Hauptinhalt, Fußbereich) lassen sich durch semantische HTML-Elemente oder Landmark-Rollen kennzeichnen.

Beziehungen zwischen Elementen – etwa gruppierte Formularfelder oder Hinweise, die zu einem Feld gehören – müssen im Code erkennbar sein.

Wenn die verwendete Technik keine programmatische Auszeichnung unterstützt, muss die Information als Text bereitgestellt werden – zum Beispiel: „Pflichtfelder sind mit einem Sternchen (*) markiert.“

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du hörst einen Radiobeitrag über eine komplexe Tabelle – aber der Moderator erklärt nicht, welche Zahlen zu welchen Kategorien gehören. Genau diese Verwirrung entsteht, wenn Strukturinformationen nur visuell verfügbar sind.

Semantische Auszeichnung schafft Barrierefreiheit, weil sie:

• Screenreader-Nutzer:innen ermöglicht, über Überschriften, Listen und Bereiche zu navigieren und Inhalte zu überspringen
• Menschen mit kognitiven Einschränkungen hilft, Struktur und Aufbau einer Seite zu verstehen – etwa wenn Hilfsmittel die Darstellung vereinfachen
• Nutzer:innen mit motorischen Einschränkungen beim effizienten Navigieren unterstützt (zum Beispiel über Sprunglinks und Bereichsnavigation)
• Menschen mit Sehbehinderungen erlaubt, eigene Stylesheets oder Lesemodi zu verwenden, ohne dass Bedeutung verloren geht
• Braillezeilen die korrekte Ausgabe von Strukturelementen ermöglicht

Und nicht zuletzt: Saubere semantische Struktur macht Inhalte robuster für verschiedene Ausgabeformen – von der Sprachausgabe bis zum Lesemodus im Browser.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Semantisches HTML ist keine Hexerei – aber es erfordert konsequentes Denken vom Inhalt her. Die wichtigsten Grundregeln:

Für Überschriften:

• Nutze h1 bis h6 für echte Überschriften, nicht für große Texte.
• Bilde die Gliederung logisch ab: h1 → h2 → h3. Übersprungene Ebenen sind kein automatischer Verstoß, verwirren aber – vermeide sie.
• Eine h1 pro Seite ist eine bewährte Empfehlung, aber keine ausdrückliche WCAG-Anforderung.

Für Listen:

• Verwende <ul> für ungeordnete Listen und <ol> für nummerierte Listen.
• Nutze <dl> für Beschreibungslisten (Begriff-Erklärung-Paare).
• Baue Listen nicht mit Bindestrichen und Zeilenumbrüchen nach – das Aussehen regelst du per CSS.

Für Tabellen:

• Kennzeichne Spalten- und Zeilenköpfe mit <th>.
• Nutze das scope-Attribut, bei komplexen Tabellen id und headers.
• Gib der Tabelle eine <caption> als Titel.
• Verwende Tabellen nur für tabellarische Daten, nicht fürs Layout.

Für Formulare:

• Verknüpfe Beschriftungen explizit mit <label for="feld-id">.
• Gruppiere zusammengehörige Felder mit <fieldset> und <legend>, etwa bei Radiobuttons.
• Verknüpfe Hinweise und Fehlermeldungen per aria-describedby mit dem Feld.
• Kennzeichne Pflichtfelder auch programmatisch mit required oder aria-required="true".

<fieldset>
  <legend>Versandart</legend>
  <input type="radio" id="standard" name="versand">
  <label for="standard">Standard</label>
  <input type="radio" id="express" name="versand">
  <label for="express">Express</label>
</fieldset>

Für Seitenbereiche:

• Nutze HTML-Elemente wie <header>, <nav>, <main>, <aside> und <footer>.
• ARIA-Landmark-Rollen wie role="navigation" brauchst du nur, wenn du diese Elemente nicht verwenden kannst.
• Biete Sprunglinks zu wichtigen Bereichen an.

Prüfen:

• Prüfe deine Seite mit einem Screenreader (zum Beispiel NVDA, kostenlos).
• Nutze den Barrierefreiheitsbaum in den Entwicklertools des Browsers.
• Schalte CSS testweise ab: Ist die Struktur dann noch erkennbar?

Eng verwandt sind Bedeutungstragende Reihenfolge, Überschriften und Beschriftungen und Name, Rolle, Wert.

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Saubere semantische Struktur ist nicht nur Pflicht – sie lohnt sich auch wirtschaftlich. Drei Gründe:

1. Reichweite vergrößern

Eine semantisch korrekte Website schließt niemanden aus. Du erreichst Menschen mit Behinderungen – in Deutschland lebten Ende 2023 laut Destatis rund 7,9 Millionen schwerbehinderte Menschen –, aber auch ältere Nutzer:innen und Menschen mit vorübergehenden Einschränkungen. Und: Nutzer:innen können eigene Stylesheets oder Lesemodi verwenden, ohne dass deine Inhalte kaputtgehen.

2. Bessere Grundlage für Suchmaschinen

Barrierefreiheit ist kein direkter Rankingfaktor. Saubere Überschriften, echte Listen und strukturierte Tabellen helfen Suchmaschinen aber, deine Inhalte zu verstehen – ein indirekter, aber spürbarer Nebeneffekt.

3. Entwicklungskosten senken

Sauberer, semantischer Code ist wartungsfreundlicher und robuster. Weniger Nachbauten mit div und Skript bedeuten weniger Fehler, einfachere Anpassungen an verschiedene Bildschirmgrößen und klarere Zuständigkeiten im Team.

Und nicht zuletzt das Recht: Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Angebote an Verbraucher:innen, etwa Online-Shops. Maßstab ist die EN 301 549 mit Verweis auf WCAG 2.1 Level AA – 1.3.1 gehört als Level-A-Kriterium dazu. Öffentliche Stellen sind über die BITV 2.0 bzw. Landesrecht verpflichtet. (Allgemeine Information, keine Rechtsberatung.)

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 1.3.1 Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Kurz gesagt: Alles, was die Gestaltung an Struktur und Zusammenhängen zeigt, muss auch im Code erkennbar oder als Text vorhanden sein.