Info und Beziehungen (WCAG-Kriterium 1.3.1)

Was bedeutet das Kriterium?

Informationen und Strukturen auf Websites beziehungsweise Beziehungen zwischen Elementen auf Websites sollen nicht nur visuell verständlich sein, sondern auch programmatisch richtig ausgezeichnet werden und bestimmt werden können. Die wichtigsten Aspekte hier sind:

Die Überschriften-Hierarchie soll richtig ausgezeichnet werden: Die Website soll nicht nur visuell strukturiert und mit CSS visuell hierarchisiert werden, sondern die HTML-Überschriften-Ebenen (h1 bis h6) sollen entsprechend und korrekt verwendet werden.
Ähnliche/gleichrangige Elemente, die visuell einer Liste ähneln, sollen auch programmatisch als Listen ausgezeichnet werden, als unordered lists (ul) oder als ordered lists (ol), sowie die Listen-Elemente darin (li). Dies gilt sowohl für vertikal angeordnete Elemente als auch horizontal angeordnete Elemente (kommt z. B. häufig in Navigationsleisten vor)
Tabellen sollen auch programmatisch als solche ausgezeichnet werden. Wichtig ist hier die Verwendung von Table-Headers (th), sowohl horizontale als auch vertikal. Komplexere Tabellen können auch mittels scope- und header-Attributen umgesetzt werden. Allerdings sollte hier überlegt werden, ob nicht die Aufteilung einer komplexen Tabelle auf mehrere einfachere Tabellen sinnvoller wäre.
Formularelemente sollen entweder direkt beschriftet oder mit einem Label korrekt verknüpft sein (siehe dazu auch Kriterium 4.1.2 Name, Rolle Wert).
Regionen der Website sollen ausgezeichnet werden, bevorzugt mit den entsprechenden HTML5-Tags oder alternativ mit dem role-Attribut.

Warum und für wen ist das Kriterium wichtig?

Blinde Nutzer:innen sind auf eine programmatisch richtige Auszeichnung der Webseite und ihrer Elemente angewiesen, um die Webseite und ihre Inhalte nachvollziehen zu können. Ist die Überschriften-Struktur nicht richtig ausgezeichnet, ist der Aufbau und die Gliederung einer Webseite kaum verständlich. Gleiches gilt für Listen. Sind Tabellen nicht richtig ausgezeichnet und Eingabefelder oder Steuerelemente nicht richtig beschriftet, sind diese de facto unzugänglich.

Was sind die häufigsten Fehler bei diesem Kriterium und wie können sie behoben bzw. vermieden werden?

Überschriften-Hierarchie ist nicht korrekt aufgebaut oder fehlt:

Generell soll die programmatisch bestimmbare Überschriften-Hierarchie (h1 bis h6) der visuellen und logischen entsprechen. Die Hauptüberschrift (h1) kann z. B. dem Seitentitel entsprechen, alle anderen Überschriften (h2 bis h6) den visuellen und logischen Aufbau der Website reflektieren. Keine Überschriften-Ebenen sollen ausgelassen werden. Gleichrangige Überschriften sollen mit der gleichen Ebene ausgezeichnet werden. Direkte Kind-Elemente mit einer Ebene darunter, direkte Eltern-Element mit einer Ebene darüber.

Strukturierung ist visuell vorhanden, aber nicht ausgezeichnet:

Neben Überschriften, sind häufig Listen, Absätze oder Tabellen visuell als solche erkenntlich, aber nicht korrekt ausgezeichnet. Damit steht diese Strukturinformation assistierenden Technologien nicht zur Verfügung.

Labels für Eingabefelder bzw. Steuerelemente sind nicht korrekt ausgezeichnet, sind nicht als solche identifiziert oder Labels und Elemente sind nicht entsprechend miteinander im Quelltext verbunden:

Die korrekte Umsetzung garantiert, dass der Zweck der Eingabefelder bzw. Steuerelemente für blinde Nutzer:innen nachvollziehbar ist.

Regionen der Websites sind nicht ausgezeichnet:

Sehr häufig verwendet und besonders hilfreich sind Navigations-Regionen, Main, Header und Footer. Damit werden Orientierung und Navigation auf der Website erleichtert. Hier kann entweder HTML5 oder auch das ARIA role-Attribut verwendet werden. Eine Umsetzung via HTML5 (Tags wie z. B.: header, nav, main, footer, aside, section) ist zu bevorzugen. ARIA soll nur in Ausnahmefällen eingesetzt werden. Bedacht werden sollte: Wenn mehrere Navigations-Regionen vorhanden sind, insbesondere wenn sich diese in derselben übergeordneten Region befinden, sollten diese Navigations-Regionen einen kurzen, aussagekräftigen Namen mittels aria-labelledby oder aria-label erhalten, siehe auch Labeling Regions (externer Link).

Nicht oder falsch getaggte PDF-Dokumente:

Zu Problemen führen PDFs ohne oder mit nur unzureichende Tag-Struktur (fehlende Überschriften, Listen, Tabellen). Ein Extrembeispiel sind PDFs aus Scans, diese vermitteln gar keine Strukturinformationen.