Barrierefreies Webdesign – Gestaltung ohne Hürden

Frederike Hermans
15. März 2022
ca. 8 Min.
Barrierefreiheit
one.design
TYPO3

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?

Prinzip 2: Hürdenlose Bedienbarkeit für Nutzer gewährleisten.

Alle Bestandteile der Website und Navigation müssen für Nutzer:innen bedienbar sein.

Die für die Nutzer:innen relevanten Informationen sollen schnell auffindbar sein. Dafür ist eine gute, übersichtliche Navigierbarkeit innerhalb des Webauftritts notwendig. Dies wird sowohl durch gut strukturierte Menüs erreicht, als auch durch die konsequente Gestaltung von Textlinks und Buttons. User:innen wird die Orientierung zudem erleichtert, indem angezeigt wird, wo auf der Website er sich aktuell befindet (Breadcrumb, unterscheidbare Aktivzustände im Menü).

Dass Inhalte auf Websites für einige Menschen gesundheitsgefährdend sein können, ist nicht jedem gleich bewusst. Bilder, Grafiken und Videos sollten z. B. ohne flackernde Elemente gestaltet werden, um kein Potential für epileptische Anfälle zu bieten. Das heißt konkret, dass Inhalte in einem Zeitraum von einer Sekunde nicht öfter als dreimal blitzen dürfen.

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 marketing@destination.one und wir nehmen die Fragen für den nächsten Beitrag mit auf.

0
Frederike Hermans
Seit ihrem Masterstudium „Media Management & Entrepreneurship“ konnte Frederike Bründermann bereits in unterschiedlichen Bereichen der digitalen Welt Erfahrungen sammeln. Nach einem stark Online Marketing geprägten Start mit jahrelanger Agenturpraxis - zuletzt auch im touristischen Umfeld - fing sie 2021, nach Absolvieren eines Web Development Bootcamps, bei destination.one an. Als Projektmanagerin unterstützt sie ihre Kunden, engagiert dabei Ihre Online-Präsenz zielgenau auszubauen.

Weitere Artikel