Barrierefreiheit ist in aller Munde. Die Relevanz für die Gestaltung von Online-Kommunikation liegt auf der Hand: Einschränkungen beim Sehen, Hören, Bewegen und Verarbeiten von Informationen müssen auch bei der Erstellung von Webinhalten mitbedacht werden. Wie genau werden Webseiten und PDF-Dateien möglichst barrierearm?
Sehschwäche, Blindheit, gebrochene oder fehlende Körperteile, Taubheit, defekte Lautsprecher: Es gibt viele Einschränkungen, die das Verarbeiten eines Webinhaltes erschweren können.
Obwohl das "World Wide Web Consortium" (W3C) im Rahmen der "Web Accessibility Initiative" (WAI) bereits seit 1997 Richtlinien für barrierefreie Webinhalte definiert, besteht in der Umsetzung noch Luft nach oben.
Eine Untersuchung (https://webaim.org/projects/million/) hat unlängst die 1 Million meistbesuchten Webseiten auf Verstöße gegen die WAI-Richtlinien untersucht. Das schockierende Ergebnis: 96,3 Prozent der Seiten wiesen mindestens einen Fehler auf. Im Durchschnitt konnten ganze 50 Verstöße pro Seite festgestellt werden.
Webinhalte barrierefrei zu gestalten, lohnt sich. Zum einen, weil es verschiedene Gesetze vorschreiben (https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/gesetze-und-richtlinien/wcag/wcag-node.html) und für Unternehmen bei Verstößen spätestens ab 2025 finanzielle Strafen drohen, wenn in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft tritt.
Barrierearme Gestaltung lohnt sich aber auch, um mit einer Webseite mehr potenzielle Kunden zu erreichen. Allein in Deutschland leben derzeit knapp 8 Millionen Menschen mit einer anerkannten Schwerbehinderung.
Wie genau erstellen Sie Webinhalte, die möglichst barrierearm gestaltet sind und möglichst viele Menschen erreichen können?
Wir haben fünf typische Fehler zusammengestellt, die auch von großen Organisationen regelmäßig begangen werden …
1. Mangelhafte HTML-Semantik
Es ist das Grundprinzip jeder barrierefreien Webseite: HTML-Strukturelemente wie die Überschriften H1 bis H6 sind entsprechend ihrer Bedeutung einzusetzen.
Die Relevanz liegt in der Erkennbarkeit für Bildschirmleseprogramme ("Screenreader"). Nur wenn der hinterlegte Quellcode korrekt formuliert und sinnvoll strukturiert ist, kann der Inhalt wie gewünscht vorgelesen werden. Sonderelemente wie Buttons, Links oder Tabellen sind im Code stets als solche zu kennzeichnen.
Ebenfalls von Bedeutung ist die inhaltliche Struktur einer Webseite. Ein übersichtliches und kurz gehaltenes Menü – nicht mehr als 5-7 Menüpunkte – vereinfacht Navigation und Verständnis. Die logische Einteilung in Haupt- und Unterseiten erleichtert auch den Einsatz von Sprachassistenten und Bildschirmleseprogrammen.
Unser Tipp: Das WAVE Web Accessibility Evaluation Tool (Link: https://wave.webaim.org/) bietet die Möglichkeit, jegliche Webseiten unkompliziert auf strukturelle Probleme zu überprüfen.
2. Fehlende Alt-Texte
"Alle Elemente eines Webinhalts müssen sowohl vorlesbar als auch anzeigbar sein", sagt Sylvie Kenakale, Designerin bei Hauptsache Kommunikation.
Barrierefreie Inhalte basieren auf dem „Zwei-Sinne-Prinzip“: Informationen werden stets nicht nur für das Auge, sondern auch für das Ohr (und umgekehrt) angeboten.
Alle Video- und Audiodateien müssen demnach ebenfalls in Schriftform vorliegen. Für Grafikelemente wie Bilder, Videos oder Tabellen gilt es, eine für Screenreader vorlesbare Beschreibung zu hinterlegen. Fehlen diese "Alternativtexte" (Alt-Texte), sind blinde oder seheingeschränkte Menschen nicht in der Lage, auf alle Inhalte zuzugreifen.
Einheitliche Standards für Länge, Stil und Inhalt von Alt-Texten existieren nicht. "Ein guter Alt-Text muss so genau wie möglich wiedergeben, was zu sehen ist, ohne dabei Romane zu schreiben", sagt Michel Lask, ebenfalls Designer bei Hauptsache Kommunikation. Knappheit dürfe nicht auf Kosten der Beschreibung gehen.
Ein Praxistipp: Der kostenlose Adobe Acrobat Reader überprüft für PDF-Dokumente alle wesentlichen Aspekte der Barrierefreiheit, also auch das Vorhandensein von Alt-Texten. Es kann zudem festgelegt werden, wie Tabellen für Screenreader zu verarbeiten sind.
3. Mangelhafte Kontraste
Nicht nur Menschen mit Seheinschränkungen können Texte, Links, Icons, Buttons, Grafiken und Formulare schlecht erkennen, wenn sich diese unzureichend vom Hintergrund abheben.
Im individuellen Fall ist stets zu überprüfen, wie Schriftfarbe und -größe mit dem gewählten Hintergrund harmonieren. Gleiches gilt für das Zusammenspiel aus Bild und Hintergrund.
WAI-Richtlinien geben Soll-Werte für Kontraste vor, deren Einhaltung unter anderem mit dem Online-Tool Contrast Checker (https://contrastchecker.com/) überprüft werden kann. Das Zusammenspiel aus Text- und Hintergrundfarben testet das ebenfalls kostenlose Programm Adobe Color (https://color.adobe.com/de/create/color-contrast-analyzer). Der Color Contrast Analyzer (https://www.tpgi.com/color-contrast-checker/) überprüft die Kombination verschiedener Farben mit einer Schriftgröße.
Die vielen verschiedenen Tools sieht Michel Lask eher als Chance, denn als Fluch: "Es gibt nicht das eine Programm, das alles kann. Die Kombination verschiedener plus die eigenen Erfahrungswerte in Sachen Umsetzung machen die Sache in der Regel rund."
Ein besonders beliebter Fehler im Bereich Kontraste liegt in der mangelhaften Einbettung von Links. In der Regel verändern verlinkte Textabschnitte beim Darüberfahren ihre Farbe. Im Sinne der Barrierefreiheit benötigen beide Varianten – während dem Darüberfahren sowie davor und danach – einen ausreichenden Farbkontrast zum Hintergrund.
4. Informationen werden ausschließlich durch Farbe kommuniziert
Es mag nach einer eleganten Form der Kommunikation klingen: Einzelne farblich hervorgehobene Schlüsselbegriffe sollen dem Leser direkt ins Auge springen und als besonders wichtiger Inhalt untermalt werden. Transportiert Farbe Information, geht diese für seheingeschränkte oder blinde Menschen allerdings verloren.
Dass ein Satz oder Begriff besonders wichtig ist, sollte in barrierefreien Inhalten also nicht nur durch (farbliche) Hervorhebung, sondern auch in Form von vorlesbarem Text ausgedrückt werden.
Der hervorzuhebende Satz
Information darf nicht ausschließlich durch Farbe kommuniziert werden
sollte also zum Beispiel wie folgt formuliert werden:
Wichtig dabei: Information darf nicht ausschließlich durch Farbe kommuniziert werden.
5. Ein Webinhalt lässt sich nur per Maus bedienen
Sind Menschen sehbehindert oder nur eingeschränkt beweglich, kann die Navigation per Maus oder Smartphone-Touchscreen zur unüberwindbaren Hürde werden.
"Eine Webseite muss bedienbar sein, ohne dass ich eine Maus berühre", sagt Michel Lask. "Das ist ein Praxistest, den jeder Inhalt mit dem Anspruch der Barrierefreiheit durchlaufen sollte."
Barrierefreie Webseiten lassen sich nicht nur mit der Maus, sondern auch per Tastatur und mit Hilfe von Sprachassistenten bedienen. Ein beliebter Fehler: Drop-Down-Menüs, die nur auf Mausklicks und somit nicht auf die Tabulatortaste reagieren.
Barrierearm statt barrierefrei
Die Liste an potenziellen Fehlern geht noch weiter: Grammatikalisch kaum verständliche Texte, eine zu starke Verwendung von Fachbegriffen, die Unterstützung von nur ausgewählten Web-Browsern oder automatisch abspielende Audio- und Videodateien, die im Zusammenspiel mit Screenreadern zur Störquelle werden können.
Gibt es die perfekte Barrierefreiheit überhaupt? "Ich spreche generell lieber von barrierearmen Inhalten", sagt Michel Lask. "Gewisse Inhalte möchtest du auch einfach drin haben, weil sie ästhetisch sind. Am Ende des Tages ist es oft ein Kompromiss: Gestaltung und Barrierearmut schließen sich nicht aus. Man muss sie nur elegant miteinander in Harmonie bringen."
Die Zusammenfassung der fünf dargestellten Fehler und Tipps liefert Sylvie Kenakale: "Es geht darum, möglichst viele und möglichst gute Alternativen zu bieten."
Hauptsache Kommunikation kommt an verschiedenen Stellen ins Spiel, wenn es um die Bereitstellung barrierearmer Webinhalte geht.
Unsere Agentur hat bereits PDF-Dateien nachträglich zu barrierefreien Inhalten gemacht, bestehende Webseiten im Sinne der Barrierefreiheit optimiert sowie neue Seiten von Anfang an barrierefrei gestaltet (siehe zuletzt die neue Website für den Hofheimer Drehpunkt).
Werden auch Sie zu unserem Kunden – wir freuen uns über Ihr Interesse!
