Konsistente Gestaltung von Navigation und UI-Elementen


Fälschlicherweise wird digitale Barrierefreiheit überwiegend so verstanden, das alles unter der Haube stattfindet – sprich vor allem im HTML und ein wenig im CSS. Tatsächlich spielt aber die Gestaltung von UI-Elementen eine große Rolle. Sprachliche Verständlichkeit kommt als dritte Dimension spätestens mit dem European Accessibility Act dazu.
Da das vor allem für Einsteigende ins Thema oft schwierig ist: Die WCAG ist immer sehr knapp, das ist auf den universellen Anspruch des Dokuments zurückzuführen. Im Kontext Web hilft es eigentlich immer, die „Understanding“-Dokumente zu lesen, die mit jedem WCAG-Erfolgskriterium verbunden sind. Sie enthalten Beispiele, die das Ganze fassbarer machen.
Ein weiteres Problem besteht darin, dass die WCAG-Kriterien theoretisch immer alle gleichzeitig gelten. Man kann zum Beispiel nicht konsistente Navigation ohne Tastatur ohne konsistente Identifikation ohne den ganzen Block zu Formular-Elementen besprechen. Ich mache es trotzdem.

SC 3.2.3:Consistent Navigation (Level AA)

Das Kriterium der „Konsistenten Navigation“ zielt darauf ab, eine einheitliche und vorhersehbare Navigation auf einer Website sicherzustellen. Es handelt sich um eine grundlegende Anforderung, um die Benutzerfreundlichkeit und Barrierefreiheit einer Webseite für Menschen mit unterschiedlichen Fähigkeiten zu verbessern.
Eine konsistente Navigation bedeutet, dass die Navigationsstruktur, das Design und die Bezeichnungen von Links und Menüs auf allen Seiten einer Website einheitlich sind. Dies ermöglicht es den Benutzern, sich leichter auf der Website zu orientieren, den Inhalt zu finden, den sie suchen, und sich effektiv durch die verschiedenen Seiten zu bewegen.
Es gibt verschiedene Aspekte, die bei der Umsetzung einer konsistenten Navigation berücksichtigt werden sollten. Dazu gehört die Verwendung einer klaren und einheitlichen Struktur für die Hauptnavigation, die auf allen Seiten gleich bleibt. Dies kann beispielsweise durch ein horizontales Menü am oberen Rand oder eine vertikale Seitenleiste erreicht werden.
Darüber hinaus sollten die Bezeichnungen von Links und Menüpunkten präzise und aussagekräftig sein, um den Benutzern zu helfen, den Inhalt zu verstehen und zu antizipieren, auf den sie beim Klicken eines Links treffen werden. Es ist wichtig, auf übermäßig abstrakte oder mehrdeutige Bezeichnungen zu verzichten, um Verwirrung zu vermeiden.
Die Platzierung der Navigationskomponenten sollte ebenfalls konsistent sein, damit Benutzer sie schnell finden können. Sie sollten an einer gut sichtbaren und erwarteten Position platziert werden, um eine intuitive Navigation zu ermöglichen.
Die Einhaltung des Kriteriums der Konsistenten Navigation trägt dazu bei, dass Menschen mit Behinderungen, einschließlich Sehbehinderungen oder kognitiven Einschränkungen, die Website effektiv nutzen können. Durch die Schaffung einer einheitlichen und vorhersehbaren Navigation wird die Benutzererfahrung verbessert und die Barrieren beim Navigieren auf der Website verringert.

3.2.4: Consistent Identification (Level AA)

Die Konsistente Identifikation bezieht sich auf die eindeutige Benennung und Identifizierung von Interaktionselementen wie Links, Schaltflächen, Formularfeldern und anderen Elementen auf einer Website. Es ist wichtig, dass diese Elemente auf allen Seiten der Website einheitlich und konsistent benannt und gestaltet sind, um eine klare Erkennbarkeit und Bedienbarkeit zu gewährleisten.
Ein Beispiel für eine konsistente Identifikation ist die Verwendung des Alt-Attributs für Bilder. Das Alt-Attribut bietet eine alternative Textbeschreibung für Bilder, die von Bildschirmleseprogrammen oder anderen assistiven Technologien verwendet wird, um Menschen mit Sehbehinderungen den Inhalt der Bilder zu vermitteln. Durch die konsistente Verwendung des Alt-Attributs wird sichergestellt, dass diese Informationen in kohärenter Weise präsentiert werden und die Nutzer eine einheitliche Erfahrung haben.
Ein weiteres Beispiel betrifft die Beschriftung von Formularelementen. Wenn ein Formular auf einer Website vorhanden ist, sollten die Beschriftungen für Eingabefelder, Kontrollkästchen und Schaltflächen eindeutig und konsistent sein. Dies hilft Benutzern, die Eingabefelder zu verstehen und auszufüllen, insbesondere für Menschen mit Sehbehinderungen oder kognitiven Einschränkungen.
Die Konsistente Identifikation hat auch Auswirkungen auf die Navigationselemente einer Website. Die Verwendung von klaren, eindeutigen und konsistenten Bezeichnungen für Menüpunkte, Links und Schaltflächen erleichtert den Benutzern die Orientierung und den Zugriff auf den gewünschten Inhalt. Wenn beispielsweise der Link zum Zurückkehren zur Startseite auf allen Seiten mit „Startseite“ beschriftet ist, können Benutzer schnell erkennen, wo sie sich befinden und wie sie navigieren können.
Die Einhaltung des Kriteriums der Konsistenten Identifikation trägt dazu bei, dass die Website für alle Benutzer leichter verständlich und bedienbar ist. Menschen mit Sehbehinderungen, kognitiven Einschränkungen oder motorischen Schwierigkeiten profitieren von der klaren Identifikation und der einheitlichen Gestaltung der Interaktionselemente.

2.4.6: Headings and Labels

Die Verwendung von Überschriften ist wichtig, um die Struktur und Hierarchie einer Webseite zu kennzeichnen. Durch die korrekte Verwendung von Überschriften können Benutzer schnell den Inhalt einer Webseite überfliegen und wichtige Informationen leicht identifizieren. Überschriften sollten in einer logischen Reihenfolge angeordnet sein, beginnend mit der Hauptüberschrift (üblicherweise die H1-Überschrift) und dann in aufsteigender Ordnung (H2, H3 usw.) für untergeordnete Abschnitte. DAs wird allerdings bereits im Erfolgskritierum Info & Relationship festgelegt. Heading and labels besagt hingegen, dass Überschriften deskriptiv sein, also den zu glieddernden Inhalt adäquat beschreiben.
Die Beschriftungen von Formularfeldern und anderen interaktiven Elementen sind ebenfalls wichtig, um den Benutzern zu helfen, ihre Funktion zu verstehen. Klare und aussagekräftige Beschriftungen ermöglichen es Benutzern, das gewünschte Formularfeld oder Element leicht zu identifizieren und korrekte Eingaben zu machen. Formularfeldbeschriftungen sollten prägnant und genau sein, um Missverständnisse oder Fehler zu vermeiden.
Um das Kriterium „Überschriften und Beschriftungen“ zu erfüllen, sollten Webentwickler sicherstellen, dass ihre Webseiten die richtige Verwendung von Überschriften gemäß den HTML-Standardtags (wie `-Tags versehen werden, um klare Beschriftungen bereitzustellen. Zum Beispiel ist „Nachname“ für das Eingabefeld für den Nachnamen besser als „Name“. Enthält eine Webseite mehr als ein Formular, sollten die Elemente jeweils unterschiedlich benannt sein oder etwa durch Fieldset sichergestellt werden, dass die Formulare nicht miteinander verwechselt werden, weil es etwa zwei Mal ein Eingabefeld für e-Mail und zwei Buttons namens „Absenden“ gibt.

Link purpose in context

Der Zweck dieses Kriteriums besteht darin, sicherzustellen, dass Links für alle Benutzer, einschließlich Menschen mit Sehbehinderungen oder kognitiven Einschränkungen, klar und verständlich sind. Durch die Verwendung aussagekräftiger und kontextbezogener Linktexte können Benutzer besser verstehen, wohin ein Link sie führen wird, ohne auf visuelle oder sonstige Kontextinformationen angewiesen zu sein.
Um das Kriterium „Link Purpose in Context“ zu erfüllen, sollten Linktexte beschreibend und eindeutig sein. Sie sollten den Benutzern eine klare Vorstellung davon vermitteln, was sie erwartet, wenn sie auf den Link klicken. Es ist wichtig, allgemeine Phrasen wie „Klicken Sie hier“ zu vermeiden, da sie keine spezifischen Informationen über das Ziel des Links liefern.
Stattdessen sollte der Linktext den Inhalt oder die Funktion des verlinkten Ziels widerspiegeln. Wenn beispielsweise ein Link auf einen Artikel mit dem Titel „Tipps für barrierefreie Webseitengestaltung“ verweist, könnte der Linktext „Barrierefreie Webseitengestaltungstipps“ lauten. Auf diese Weise haben Benutzer eine klare Vorstellung davon, wohin der Link führt, noch bevor sie ihn aktivieren. Wichtig ist daneben auch, unerwartetes Verhalten zu verhindern: Es sollte klar sein, ob ein Link zu einer anderen Unterseite führt oder zu einem anderen Web-Angebot, einem Download oder einem Video.
Es ist auch wichtig sicherzustellen, dass Links im Kontext des umgebenden Textes präsentiert werden. Der Text, der den Link umgibt, sollte relevante Informationen enthalten, die dem Benutzer den Zweck des Links erklären. Wenn beispielsweise ein Link in einem Absatz über barrierefreie Webentwicklung erscheint, sollte der umgebende Text Informationen liefern, die den Benutzer darauf hinweisen, dass der Link weitere Informationen zu diesem Thema enthält.
Durch die Einhaltung des Kriteriums „Link Purpose in Context“ wird die Zugänglichkeit und Benutzerfreundlichkeit einer Webseite verbessert. Benutzer können Links leichter verstehen und entscheiden, ob sie ihnen folgen möchten. Menschen mit Sehbehinderungen, die auf Bildschirmleseprogramme angewiesen sind, können mithilfe des umgebenden Textes den Zweck des Links erfassen und fundierte Entscheidungen treffen.