Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Mit Such-Strings zum Ziel veröffentlicht in 2013

Es gibt zahlreiche Anforderungen im barrierefreien Webdesign, die über die technische Zugänglichkeit hinausgehen und auf eine bessere Nutzbarkeit für Menschen mit Behinderungen abzielen. Ein gutes Beispiel für eine solche Anforderung ist die konsistente Erkennung. Auf Konformitätsstufe AA der WCAG 2.0 müssen die Teile der Benutzungsschnittstelle, die innerhalb eines Webauftritts die gleiche Funktion haben, mit gleichlautendem Text beschriftet werden.

Das Szenario

Nutzer, die eine Webseite öfters aufsuchen, werden sich zunehmend Seitenaufbau, Link- und Schaltflächentexte u.v.m. einprägen. Je häufiger sie die Website besuchen, desto eher werden sie konkrete Inhalte oder Funktionen auf direktem Weg ansteuern. Vor allem für Tastaturnutzer und insbesondere Screenreader-Nutzer kommt dann eine Funktion des Browsers zum Einsatz: Mit der Suchfunktion des Browsers wird nach Begriffen oder Textschnipseln gesucht, um so die Navigation durch die Seite abzukürzen.

Ein Suchfenster des Screenreaders JAWS mit Suchtext 'Speichern' Die zu findenden Texte müssen einheitlich formuliert werden

Für sehende Tastaturnutzer stellt diese Suchtechnik ein geringeres Problem dar, es sei denn, die zu suchenden Texte verbergen sich in den Alternativtexten von Grafiken.

Die Anforderung betrifft vor allem Komponenten der Benutzungsschnittstelle. Technisch gesehen handelt es sich um Formular-Steuerelemente, Links oder fortgeschrittene Widgets. Insbesondere geht es aber um solche Komponenten, die vom Nutzer als Steuerelement wahrgenommen werden. Das bedeutet:

Beispiele für konsistente Erkennung

Steuerelemente der Benutzungsschnittstelle mit gleicher Funktionalität müssen auch gleich beschriftet werden. Dem Grunde nach geht es darum, dass Tastaturnutzer und insbesondere Screenreader-Nutzer die Suchfunktion des Browsers nutzen können müssen, um Funktionen der Webseite schnell erreichen zu können.

Beschriftung von Schaltflächen

Schaltflächen, die eine gleiche Funktion auslösen, müssen nach der WCAG 2.0 gleich beschriftet werden. Wenn die gleiche Funktion mit unterschiedlich beschrifteten Schaltflächen ausgelöst werden kann, ist die Extern, englischsprachig: Anforderung der konsistenten Erkennung nicht erfüllt.

Ein Formular mit Eingabefeld, Such-Button, weitere Optionen und einen weiteren Such-Button Das Formular kann mit zwei gleichnamigen Schaltflächen abgeschickt werden

Hilfe-Funktion

Wenn in Formularen kontextuelle Hilfen mit verlinkten Icons bereitgestellt werden, dann sollten die Alternativtexte so gewählt werden, dass sie mit einer Suchfunktion gefunden werden können. Bei einer Hilfe-Funktion bietet sich das Wort "Hilfe" für den Alternativtext an; es ist aber auch sinnvoll, den Alternativtext einer kontextuellen Hilfe-Funktion nicht nur konsistent, sondern auch beschreibend zu formulieren, damit Funktionen außerhalb des Kontextes im Screenreader unterschieden werden können.

Mehrere Eingabefelder mit jeweils einem i auf grünem Grund dahinter

Das bedeutet, die Alternativtexte werden nicht gleich, sondern mit einem gleichen Teil-String formuliert. Anstatt beispielsweise einfach nur "Hilfe" als Alternativtext für alle Icons einzusetzen, sollten unterschiedlich lautende Alternativtexte "Hilfe zu Anschrift Name", "Hilfe zu Postleitzahl" usw. eingesetzt werden. Obwohl die Alternativtexte unterschiedlich lauten, sind sie trotzdem konsistent, weil sie mit einem Suchbegriff "Hilfe" gefunden werden können.

Ein anderes Beispiel für konsistente und beschreibende Alternativtexte ist ein Drucken-Symbol, das in verschiedenen Bereichen eines E-Shops eingesetzt wird, aber im Bereich "Rechnungen" den Alternativtext "Rechnung drucken" und im Bereich "Bestellung" den Alternativtext "Bestellung drucken" besitzt.

Schwierigkeiten bei der Überprüfung

Die konsistente Erkennung gilt grundsätzlich seitenübergreifend. Es ist vor dem Hintergrund der Barrierefreiheit aber ratsam, mehrere Steuerelemente mit gleicher Funktionalität, die sich auf einer einzelnen Seite befinden, ebenfalls konsistent zu beschriften, wie das Beispiel mit der kontextuellen Hilfe zeigt.

Probleme bei der Überprüfung entstehen z.B. wenn es mehrere Möglichkeiten gibt, eine Funktion auszuführen. Wenn beispielsweise in einer Navigationsleiste der Link zur Kontaktseite "Kontakt" heißt, dann müssen andere Steuerelemente, die ebenfalls zur Kontaktseite führen, genauso mit "Kontakt" beschriftet werden, auch wenn sie in einem anderen Kontext stehen.

Die Frage des Kontextes ist auch relevant, wenn ein Icon zu verschiedenen Zwecken eingesetzt wird, etwa ein Häkchen, das einerseits für absolvierte Prozessschritte und andererseits als Zeichen der Zustimmung genutzt wird; in diesem Fall müssen die Alternativtexte unterschiedlich ausfallen.