Anpassbar: So bleiben Struktur und Bedeutung erhalten

1.3.1 Info und Beziehungen (Level A)

Dieses Kriterium ist das Fundament der digitalen Barrierefreiheit. Es besagt, dass strukturelle Informationen, die visuell oder auditiv vermittelt werden, auch programmatisch verfügbar sein müssen. Das bedeutet, dass Hilfstechnologien wie Screenreader die Bedeutung und Beziehungen von Inhalten verstehen können.

Konkret bedeutet dies, dass Sie Überschriften korrekt mit <h1>, <h2>, etc. auszeichnen müssen. Ein Screenreader kann dann eine Navigation durch die Überschriften erstellen, sodass Nutzer schnell zu relevanten Abschnitten springen können. Listen müssen als <ul> oder <ol> strukturiert werden, damit klar wird, dass es sich um zusammengehörige Punkte handelt. Formulare benötigen <label> Elemente, die mit den Eingabefeldern verknüpft sind, und Tabellen müssen Kopfzeilen (<th>) haben, die den Inhalt der Zellen erklären.

Ein häufiger Fehler ist es, Überschriften nur visuell durch größere Schrift oder Fettdruck zu kennzeichnen. Für sehende Nutzer mag das ausreichen, aber ein Screenreader erkennt diese visuelle Formatierung nicht. Stattdessen liest er alle Texte in der gleichen monotonen Stimme vor, ohne zu signalisieren, wo neue Abschnitte beginnen. Das macht es praktisch unmöglich, die Struktur einer Seite zu verstehen.

1.3.2 Bedeutungsvolle Reihenfolge (Level A)

Die Reihenfolge, in der Inhalte im Quellcode stehen, bestimmt, in welcher Reihenfolge sie von Hilfstechnologien präsentiert werden. Dies ist besonders wichtig, da viele moderne Websites mit CSS-Layouts arbeiten, die die visuelle Anordnung völlig von der HTML-Reihenfolge trennen können.

Der Lesefluss muss logisch und nachvollziehbar sein. Das bedeutet, dass Sie Inhalte in sinnvoller Reihenfolge im HTML-Code strukturieren sollten. Navigationselemente gehören normalerweise vor den Hauptinhalt, und wichtige Informationen dürfen nicht nur über ihre Position kommuniziert werden.

Stellen Sie sich vor, Sie haben eine Sidebar mit wichtigen Informationen, die visuell rechts neben dem Hauptinhalt erscheint. Wenn diese Sidebar im HTML-Code aber vor dem Hauptinhalt steht, hört ein Screenreader-Nutzer zuerst alle Sidebar-Inhalte, bevor er zum eigentlichen Artikel gelangt. Das wäre so, als würde man jemandem zuerst alle Fußnoten eines Textes vorlesen, bevor man mit dem Haupttext beginnt.

1.3.3 Sensorische Eigenschaften (Level A)

Anweisungen und wichtige Informationen dürfen nicht ausschließlich auf sensorischen Eigenschaften wie Form, Größe, visueller Position, Orientierung oder Klang basieren. Dies ist ein kritischer Punkt, der oft übersehen wird, aber enormous Auswirkungen auf die Nutzbarkeit hat.

Problematisch sind Anweisungen wie „Klicken Sie auf den grünen Button rechts“ oder „Hören Sie das Klingeln für weitere Informationen“. Menschen, die Farben nicht unterscheiden können, wissen nicht, welcher Button gemeint ist. Blinde Nutzer können die Position „rechts“ nicht lokalisieren, und gehörlose Nutzer hören das Klingeln nicht.

Besser wäre: „Klicken Sie auf den ‚Weiter‘-Button“ oder „Klicken Sie auf den ‚Anmelden‘-Button in der oberen rechten Ecke“. Hier wird die Funktion des Buttons genannt, zusätzlich zur Position. Dies hilft allen Nutzern, den richtigen Button zu finden, unabhängig davon, wie sie die Seite wahrnehmen.

1.3.4 Ausrichtung (Level AA)

In unserer mobilen Welt ist es essentiell, dass Inhalte sowohl im Hoch- als auch im Querformat funktionieren. Dies geht über responsive Design hinaus – es geht darum, dass Menschen mit verschiedenen Bedürfnissen ihre Geräte in der für sie optimalen Ausrichtung verwenden können.

Menschen mit motorischen Einschränkungen haben möglicherweise ihr Tablet oder Smartphone fest montiert und können die Ausrichtung nicht ändern. Andere bevorzugen bestimmte Ausrichtungen, weil sie damit besser arbeiten können. Wenn Ihre Website nur in einer Ausrichtung funktioniert, schließen Sie diese Nutzer aus.

1.3.5 Eingabezweck identifizieren (Level AA)

Moderne Browser können Formulare automatisch ausfüllen, aber nur wenn sie verstehen, welchen Zweck ein Eingabefeld hat. Dies hilft nicht nur bei der Benutzerfreundlichkeit, sondern ist besonders wichtig für Menschen mit kognitiven Beeinträchtigungen oder motorischen Einschränkungen, die das wiederholte Ausfüllen von Formularen als besonders belastend empfinden.

Formularfelder sollten ihren Zweck programmatisch mitteilen, beispielsweise durch das autocomplete-Attribut. So weiß der Browser, dass ein Feld für die E-Mail-Adresse, den Namen oder die Telefonnummer bestimmt ist, und kann entsprechende Vorschläge machen.