Dieses WCAG-Kriterium 1.3.1 verlangt, dass alle Informationen, die durch visuelle oder auditive Gestaltung vermittelt werden – wie Überschriften, Listen, Tabellen, Gruppen von Formularfeldern oder Hervorhebungen – auch für unterstützende Technologien wie Screenreader erkennbar sind. Das bedeutet, dass die Struktur und die Zusammenhänge in einem Webinhalt so dargestellt werden müssen, dass sie von Maschinen gelesen und verstanden werden können – zum Beispiel durch semantische HTML-Elemente (oder ergänzend durch ARIA-Attribute). Wo das nicht möglich ist, soll eine klare textliche Beschreibung helfen (z. B. „Alle Pflichtfelder sind mit * gekennzeichnet.“). So bleibt der Inhalt für alle Menschen zugänglich, unabhängig davon, wie sie auf ihn zugreifen.
Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.3.1
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriterium 1.3.1:
- Es sollte möglichst immer semantisches HTML eingesetzt werden, um einzelne Inhaltselemente (z.B. Überschriften, Listen, Links) auszuzeichnen. Denn eine gute semantische Struktur bildet die Basis einer barrierefreien Seite. Benutzer mit assistierender Technik wie ein Screenreader sind auf semantische Informationen angewiesen, um die Elemente einer Webseite verstehen und durch die Seite navigieren zu können.
- Auch für Screenreader-Nutzer muss eine Tabelle verständlich aufgebaut sein. Dazu müssen die Daten- mit den Kopfzellen verbunden und Tabellenbeschreibungen (Captions) mit der Tabelle verknüpft werden.
- In Formularen müssen die Beschriftungen (Label-Tag) mit den zugehörigen Inputfeldern verknüpft sein (for-Attribut), damit Screenreader-Nutzer verstehen können, was sie eingeben sollen. Bei komplexere Eingabefelder wie Checkboxen sollten in Fieldsets gruppiert und ebenfalls mit einer Beschriftung (Legend) versehen sein. Bei Bedarf sollte ARIA eingesetzt werden, wenn die semantischen HTML-Elemente nicht ausreichen.
- Die HTML-Elemente Button (button-Tag) und Link (a-Tag) sind unterschiedlich und vermitteln einem Screenreader-Nutzer auch einen jeweils anderen Kontext. Der button-Tag sollte eingesetzt werden, wenn eine Interaktion auf der Seite ausgeführt wird (z.B. Ausklappen eines Untermenüs). Ein Link (a-Tag) wiederum sollte eingesetzt werden, wenn der Benutzer zu einer anderen Ansicht navigieren will (z.B. ein Link zu einer Unterseite).
- Landmarks sind HTML-Tags, die Seitenbereiche (Regionen) auf einer Webseite kennzeichnen; zum Beispiel den Hauptinhalt (main-Tag) oder einen Navigationsbereich (nav-Tag). Anders als das neutrale Div-Tag vermitteln sie eine Bedeutung und können Screenreader-Nutzern bei der Navigation helfen.
- Zur Erfüllung des WCAG AAA-Kriterium 1.3.6 ist die Umsetzung einer korrekten semantischen Struktur (inkl. Landmarks und bei Bedarf mit ARIA) in einer Website notwendig.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 1.3.1 Informationen und Beziehungen.
