Die 7 wichtigsten Faktoren für barrierefreie Webseiten
Digitale Barrierefreiheit beginnt bei der eigenen Website / Foto: Markus Spiske, Unsplash
Was ist digitale Barrierefreiheit?
Barrierefreiheit? Das sind doch Rollrampen, Wohnungskomplexe mit Aufzügen oder die vertonte Grünphase einer Ampel. Barrierefreiheit kann aber auch auf Websites angewandt werden. Digitale Barrierefreiheit gewährleistet, dass Webanwendungen von allen Nutzern ohne Nachteil verwendet werden können, und zwar unabhängig von physischen (Motorik, Hören, Sehen), psychischen (z. B. Lesefähigkeit, Verständnis) oder technischen Einschränkungen (fehlende Hilfsmittel für Audioausgabe, Nutzung veralteter Software). Digital barrierefreie Webanwendungen umfassen:
- Websites und auch Intranetlösungen
- mobile Anwendungen
- elektronische Verwaltungsabläufe
Standards für barrierefreies Internet
A, AA oder doch AAA? Nein, wir sind nicht mit dem Kopf auf der Tastatur eingeschlafen. Die hier genannten Buchstabenformationen bilden die drei möglichen Standards der Web Content Accessibility Guidelines 2.1 (WCAG, Richtlinien zur Barrierefreiheit von Webinhalten), standardisiert durch das World Wide Web Consortium (W3C). Seit Juni 2018 agieren wir mit den WCAG 2.1. Besagte Standards sollen die Richtlinien für alle darstellen, die an der Planung, Entwicklung und redaktionellen Pflege einer Website beteiligt sind. Dabei stellt die Konformitätsstufe A die niedrigste und AAA die höchste Stufe dar.
WCAG für bestimmte Websites Pflicht
Grundsätzlich wird empfohlen, die Standards der WCAG 2.1 zu berücksichtigen, um möglichst vielen Nutzern eine einfache Bedienung der Website zu gewährleisten. Gesetzlich vorgeschrieben ist Barrierefreiheit mit Standard AA derzeitig für Webseiten öffentlicher Stellen (gültig seit Juli 2019). In Deutschland ist dies in der Barrierefreien-Informationstechnik-Verordnung (BITV 2.0) geregelt.
Wir als Digitalagentur ifabrik berücksichtigen diese Standards zur Barrierefreiheit bei der Umsetzung aller unserer Kundenprojekte.
Bei Farbenblindheit wird das Farbspektrum nur eingeschränkt wahrgenommen (rechts: Wahrnehmung mit Grünschwäche) / Foto: Aaron Burden, Unsplash
Die 7 wichtigsten Faktoren für Barrierefreiheit
Es gibt unzählige Aspekte für wirkliche digitale Barrierefreiheit. Hier sind unsere sieben wichtigsten Punkte, die Sie unbedingt beachten sollten, um allen das bestmögliche barrierefreie Nutzererlebnis bieten zu können:
Farbgebung und Kontraste
Die Lesbarkeit von Texten oder Grafiken ist ein überaus bedeutender Faktor für die Barrierefreiheit einer Website oder Webanwendung. So sollte der Kontrast zwischen Text oder Elementen und Hintergrund nicht zu gering sein. Andernfalls leidet die Lesbarkeit darunter und die Webinhalte können nicht richtig erkannt werden. Zudem wird Farbe oft als Informationsträger genutzt, wie beispielsweise Rot als Warn- und Signalfarbe. Bei der Verwendung farbiger Elemente oder Schriften zu beachten, dass sie auch etwa bei Farbenblindheit gut erkennbar sein sollten. Das heißt, dass die entsprechende Information (bei Rot die Warnintention) nicht ausschließlich über die Farbe vermittelt werden darf.
Strukturierung
Alle Webseiten bedienen sich grundsätzlich der gleichen Bausteine, die in Symbiose eine komplette Webanwendung ergeben. Besagte Bausteine erfüllen ihren optimalen Zweck aber erst, wenn der semantischen Struktur Genüge getan ist. Dies wird z. B. benötigt, um Menschen mit Sehbeeinträchtigung Orientierung am allgemeinen Aufbau der Seite zu geben. Mit folgenden Elementen strukturieren Sie Ihre Website oder mobile Webanwendung und vereinfachen damit die Lesbarkeit:
- Überschrift und Zwischenüberschriften
- Absätze
- Auflistungen und Aufzählungen
- Tabellen
- Audio- und Video-Elemente wie Bilder, Grafiken, Tonspuren oder Videos
Responsivität und Skalierbarkeit
Eine Webseite sollte auf jedem Endgerät, sei es ein Computer, ein Tablet oder ein Smartphone, gut erkenn- und bedienbar sein. Viele Menschen nutzen die Vergrößerungsfunktion ihres Browsers, um Text (in kleiner Schriftgröße) oder Bilder besser erkennen zu können. Dennoch sollte der Inhalt noch gut les- und erkennbar sein, auch ohne lästiges horizontales Scrollen oder Hin-und-her-Schieben.
Leichte Sprache
Kurze Sätze mit simplem Satzbau sind zu bevorzugen. Wenn möglich sollte die Sprache in Hochdeutsch gehalten sein. Komplexe, stark verschachtelte Sätze und Fachwörter, die die lesende (oder hörende) Zielgruppe nicht versteht, sollten unbedingt vermieden werden.
Navigation
Bei der Navigation sprechen wir nicht nur von einer guten Erreichbarkeit und Bedienung der allgemeinen Haupt-Navigation am Anfang einer Webseite oder einer Webanwendung. Alle weiterführenden und interaktiven Elemente der Seite wie Links, Buttons, Formulare etc. sollten bestenfalls nicht nur mit der Maus, sondern auch mit der Tastatur ansteuerbar sein.
Seiten-Titel und Meta-Description
Im Quelltext einer Website finden sich Angaben zu Titel und Meta-Description der Seite. Durch sie sollte das Thema einer Seite leicht erkennbar sein. Deshalb wählen Sie Seitentitel und Meta-Description sinnvoll und achten Sie auf eine angemessene Zeichenzahl. Diese Daten werden auch von Suchmaschinen wie Google genutzt und auf den Suchergebnisseiten ausgegeben. Setzt man z. B. keine Meta-Description, sucht sich die Suchmaschine einen von ihr als sinnvoll erachteten Textausschnitt und bildet ihn in den Suchergebnissen ab.
Alternative Beschreibungen von Bildern und Texten
Die sogenannten alt-Attribute (auch alt-Tags) sollten für Bilder und Grafiken genutzt werden, um das Abgebildete zu beschreiben. Dieser Alternativtext hilft, den Inhalt zu verstehen, wenn das Bild nicht angezeigt oder erkannt werden kann. Auch Links können bspw. title-Tags tragen, um das Link-Ziel entsprechend zu beschreiben. Sowohl alt-Texte als auch title-Texte werden für die Sprachausgabe einer Webanwendung benötigt.
Hilfreiche Tools zum Testen
Natürlich bedarf es mehr als eines guten Auges, um Kleinigkeiten und größere Problemzonen im Code der Webanwendung zu lokalisieren, um digitale Barrierefreiheit zu gewährleisten. Für einen Stichprobentest können Sie manuell einzelne Seiten testen, wie beispielsweise hier beim Projekt BIK für Alle beschrieben. Für den schnellen Check bieten sich die Developer-Tools der Browser Firefox und Chrome an.
Um schneller und systematischer Schwachstellen aufzudecken, gibt es ein paar Test-Tools für digitale Barrierefreiheit.
WAVE (Web Accessibility Evaluation Tool)
Eines der nützlichsten Tools zum Testen von Barrierefreiheit ist WAVE (Web Accessibility Evaluation Tool, Instrument zur Bewertung der Web-Barrierefreiheit). Dieses kann als Browser-Addon oder als API für die gesamte Seite genutzt werden.
WAVE spürt einfache bis schwerwiegende Fehler auf. So legt es unter anderem ungünstige Kontrastwerte (z. B. bei Text auf farbigem Hintergrund), fehlende alt-Texte bei Bildern und fehlerhafte Strukturen in der Hierarchie der HTML-Elemente offen.
Weiterhin kann dieses Test-Tool interaktiv genutzt werden. Farben eines bemängelten Kontrastwertes können beispielsweise dementsprechend angepasst werden. Das Tool bewertet dann das Farbverhalten neu und gibt zudem den passenden WCAG-Standard (A, AA oder AAA) mit an die Hand.
Screenreader
Menschen mit Sehbeeinträchtigung nutzen zum „Ansehen“ von Webseiten Screenreader (Bildschirm-Lese-Programme). Es bietet sich also an, die eigene Webanwendung mittels eines solchen Screenreaders selbst zu testen. Hier gibt es für die verschiedensten Betriebssysteme (Windows, macOS, Ubuntu, etc.) eigene unterstützende Systeme. Diese sind zumeist mit einfachen Tastenkombinationen aufruf- und steuerbar.
Fazit
Digitale Barrierefreiheit bedeutet, jedem Nutzer den Zugang zu Webanwendungen zu ermöglichen und zu erleichtern. Dabei spielen Faktoren wie Bedienbarkeit, Strukturierung und Lesbarkeit eine essenzielle Rolle. Mit bestimmten Tools lässt sich jedes digitale Projekt auf Barrierefreiheit testen.
Autor: Tobias Garz
Sie wollen, dass Ihre Website oder Ihr Intranet barrierefrei ist? Wir machen das für Sie. Kontaktieren Sie uns am besten gleich.
