In Teil drei unserer Reihe zum Thema „Barrierefreies Webdesign“ geben wir einen Überblick über die drei ersten der vier Prinzipien der WCAG aus Sicht der Gestaltung und übertragen sie auf das Medium Website: gut wahrnehmbar, bedienbar und verständlich, denn so müssen barrierefreie Anwendungen laut Usability Richtlinien gestaltet sein.
Wir knüpfen mit diesem Artikel an die Betrachtung der Grundlagen der Barrierefreiheit im Web an. Allen Nutzer:innen das Konsumieren der Inhalte zu erleichtern und zugänglich zu machen – das steht dabei grundsätzlich im Vordergrund.
Prinzip 1: Webinhalte wahrnehmbar gestalten
Informationen und weitere Bestandteile müssen den Benutzer:innen so präsentiert werden, dass sie diese einfach wahrnehmen können.
Die Inhalte einer Website werden so dargestellt, dass sie auf unterschiedlicher Art und Weise ausgegeben werden können. Die Anforderung ist erfüllt, wenn die Inhalte visuell, auditiv oder auch mit Hilfe anderer Assistenzgeräte problemlos konsumiert werden können. Besonders relevant ist dahingehend der Einsatz von Textalternativen für alle Nicht-Text-Inhalte (z. B. Bilder) sowie die Nutzung von passenden Strukturelementen wie Absätze, Überschriften u. a., um eine alternative Ausgabe der Inhalte überhaupt erst zu ermöglichen. Die Wahrnehmung von Farben, Formen, Positionen der Elemente oder Töne darf dabei für das Verständnis des Inhalts und die Bedienung nicht notwendig sein.
Auch eine klare Trennung des Inhalts in Vorder- und Hintergrund ist hinsichtlich der Unterscheidbarkeit der relevanten Inhalte von dekorativen Elementen unerlässlich. Textlinks werden beispielsweise nicht nur farblich hervorgehoben, sondern zudem stark gefettet oder unterstrichen. Zu vermeiden sind daher auch Schriftgrafiken, wenn sie keine wichtigen Inhalte enthalten und nur dekorative Zwecke erfüllen.
Gestaltungscheck:
- Liegen für Nicht-Text-Elemente (Bilder, Videos etc.) alternative Texte vor?
- Werden feste und eindeutige Seitenstrukturen genutzt?
- Werden HTML5 Elemente genutzt, um den Inhalt zu strukturieren?
- Ist die farbliche Gestaltung der Website kontrastreich genug (mind. 4,5:1)?
- Werden wichtige Inhalte nicht in Form von Bildern oder Schriftgrafiken wiedergegeben, sondern als Texte?
Gestaltungscheck:
- Sind Menü und Navigation klar strukturiert?
- Werden Breadcrumbs und unterschiedliche Aktivzustände von z. B. Buttons genutzt?
- Ist die Sprache klar und verständlich mit nicht allzu langen, verschachtelten Sätzen?
- Ist die Seitengestaltung an sich klar verständlich und navigierbar?
- Werden einfache, nicht blitzende Grafiken bzw. Bewegtbilder genutzt?
Prinzip 3: Verständliche Informationen und intuitive Nutzung
Bereitgestellte Informationen und die Bedienung der Website müssen verständlich sein.
Um die Inhalte der Website problemlos erfassen zu können, ist deren Lesbarkeit eine elementare Voraussetzung. Dies gelingt unter anderem in Form von deutlich lesbaren Schriftgrößen und -arten. Aber auch die Verständlichkeit der Texte an sich ist unabdingbar. Bei der Formulierung der Texte sollte auf ungewöhnliche Begriffe und Abkürzungen ebenso wie auf die Verwendung von komplizierten Sätzen möglichst verzichtet werden. Kurze, einfache Sätze erleichtern die Ausgabe der Inhalte über z. B. Screenreader merklich.
Neben den Inhalten steht bei der Gestaltung einer Website die intuitive Benutzung der Nutzer:innen im Mittelpunkt. Der Aufbau und die Benutzung sind hierzu vorhersehbar zu gestalten. Einheitliche und konsequente Navigationsmechanismen auf allen Seiten wie z. B. Breadcrumb, Navigation, Footer, oder das Logo, das auf allen Unterseiten als „Zurück zur Startseite“ dient, tragen hier zu ebenso bei wie eine einheitliche Benennung der Funktionen.
Zur Steigerung der Benutzerfreundlichkeit zählt ebenfalls, Menschen mit Einschränkungen beim Ausfüllen von Formularen entsprechende Hilfestellungen zu liefern. So sollten hier unterstützende Funktionen für die Eingabe bereit gestellt werden, um Fehler zu vermeiden. Durch das Kennzeichnen von fehlerhaften Eingaben und eine einfache Beschreibung des Fehlers ist den Nutzer:innen sehr geholfen, z. B. in Form von markierten Pflichtfeldern oder auch der Beschränkung der möglichen Eingaben, um Fehler zu vermeiden.
Gestaltungscheck:
- Sind alle gewählten Schriftgrößen und -arten gut lesbar und weisen einen ausreichenden Farbkontrast auf?
- Werden Schaltflächen/Buttons und dazugehörige Erklärungen auch zusammenhängend platziert?
- Wird beim Ausfüllen von Formularen Hilfestellung durch Hinweise geleistet?
- Werden wichtige Informationen, Details und Downloads prominent genug platziert und kommuniziert?
- Weisen alle Buttons und Textfelder ein verständliches Label auf?
Habt Ihr spezielle Fragen oder Anliegen zu dem Thema? Dann schreibt uns gern eine Mail an [email protected] und wir nehmen die Fragen für den nächsten Beitrag mit auf.
