WCAG 2.1 - 1.3.1
Info and Relationships
Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmgesteuert bestimmt oder in Textform verfügbar sein.
Inhalt
Was Bedeutet das Success Criterium 1.3.1 - Info and Relationships?Warum ist es so wichtig, das Success Criterium 1.3.1 - Info and Relationships zu beachten?Was hat das Success Criterium 1.3.1 - Info and Relationships mit dem BFSG zu tun?Lösungen für 1.3.1 - Info and Relationships anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.3.1 - Info and Relationships?Was Bedeutet das Success Criterium 1.3.1 - Info and Relationships?
Das Success Criterion 1.3.1 (Info and Relationships) der WCAG fordert, dass alle Informationen, Strukturen und Beziehungen, die durch das Layout und die Darstellung einer Webseite vermittelt werden, auch programmatisch (also im Code) verfügbar sind. Das bedeutet, dass Überschriften, Listen, Tabellen, Bereiche usw. mit den richtigen HTML-Elementen oder ARIA-Rollen ausgezeichnet sein müssen. Dadurch können unterstützende Technologien wie Screenreader die Struktur und die Beziehungen genau so erfassen, wie sie visuell dargestellt werden.
Beispiele für richtige semantische Auszeichnung:
- Verwenden von
<h1>bis<h6>für Überschriften - Kennzeichnen von Listen mit
<ul>,<ol>und<li> - Tabellen mit
<table>,<thead>,<tbody>,<tr>,<th>,<td> - Formulare mit zugeordneten Labels
- Bereiche mit
<nav>,<main>,<section>,<article>,<aside>oder entsprechenden ARIA-Rollen
Für redaktionelle Inhalte gilt: Vermeiden Sie es, allein mit visuellen Mitteln wie Farben, Fettschrift oder Einrückungen Strukturen darzustellen. Nutzen Sie immer die passenden HTML-Strukturelemente.
Warum ist es so wichtig, das Success Criterium 1.3.1 - Info and Relationships zu beachten?
Viele NutzerInnen mit Behinderungen – etwa Menschen, die Screenreader verwenden – sind darauf angewiesen, Webseiten 'nur' im Code zu erleben. Sie sehen die optische Gliederung nicht, sondern erhalten Informationen über die Struktur und Beziehungen der Elemente ausschließlich durch die korrekte Auszeichnung im Code. Fehlt diese, ist die Seite für sie nicht nutzbar oder Informationen sind nicht auffindbar. Auch Zugänglichkeit für Sprachsteuerung und andere assistive Techniken ist auf diese Struktur angewiesen.
Was hat das Success Criterium 1.3.1 - Info and Relationships mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verlangt ausdrücklich die Einhaltung der aktuellen WCAG-Standards. Criterion 1.3.1 ist ein Kernbestandteil, weil ohne korrekte semantische Auszeichnung keine adäquate Zugänglichkeit für unterstützende Technologien gewährleistet ist. Wird dieses Kriterium verletzt – zum Beispiel, indem Überschriften nur als fett formatierter Text ausgezeichnet sind oder Listen mit einfachen Zeilenumbrüchen nachgebaut werden – wird die Seite für viele Betroffene unbenutzbar. Das Ziel des BFSG, selbstbestimmte digitale Teilhabe für alle, kann dann nicht erreicht werden.
Lösungen für 1.3.1 - Info and Relationships anhand von Codebeispielen
Falscher Code
<div style="font-weight: bold; font-size: 2em;">Unsere Leistungen</div>
<p>...</p>Korrekter Code
<h2>Unsere Leistungen</h2>
<p>...</p>Im schlechten Beispiel wird eine Überschrift nur optisch hervorgehoben, aber nicht korrekt als Überschrift ausgezeichnet. Screenreader erkennen hier keine Überschrift und die semantische Bedeutung fehlt. Im guten Beispiel wird die Überschrift mit `<h2>` ausgezeichnet und ist damit auch für Hilfstechnologien als solche identifizierbar.
Falscher Code
<div>1. Beratung<br>2. Entwicklung<br>3. Support</div>Korrekter Code
<ol>
<li>Beratung</li>
<li>Entwicklung</li>
<li>Support</li>
</ol>Hier wird eine Liste rein visuell durch Zahlen und Zeilenumbrüche dargestellt. Ein Screenreader liest dies als normalen Fließtext. Das gute Beispiel nutzt ein geordnetes Listen-Element `<ol>` mit `<li>`, so dass die Liste als solche erkannt und korrekt ausgegeben wird.
Falscher Code
<label>Name:</label>
<input type="text" id="name">Korrekter Code
<label for="name">Name:</label>
<input type="text" id="name">Im schlechten Beispiel fehlt die Verknüpfung zwischen dem Label und dem Eingabefeld. Unterstützende Technologien können die Zuordnung so nicht herstellen. Im guten Beispiel ist das Label mit dem Feld durch das `for`-Attribut korrekt verbunden – Screenreader geben das Label damit beim Fokussieren des Eingabefelds aus.
Wie löse ich Verstöße gegen das Success Criterium 1.3.1 - Info and Relationships?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.