Barrierefreies Webdesign: So optimieren Sie Ihre Website

Die Thematik des Barrierefreien Bauens ist in der analogen Welt einigermaßen fest angekommen, im Digitalen beim Barrierefreien Webdesign hapert es manchmal noch — trotz technischer Möglichkeiten. Dabei sind fast zehn Prozent der Bevölkerung in Deutschland schwerbehindert, Menschen mit leichter Sehbeeinträchtigung oder Hörschädigung sind da noch nicht eingeschlossen. Neben digitaler Teilhabe liegen die Vorteile auch für Sie als Webseiteninhaber*in auf der Hand: Sie erreichen schlichtweg mehr Menschen aus Ihrer Zielgruppe und damit auch mehr potenzielle Kund*innen. Außerdem wird barrierefreies Webdesign von den Suchmaschinen im Ranking belohnt.

Der erste Gedankenimpuls ist manchmal, dass bei der Rücksicht auf Barrierefreiheit Abstriche in Kauf genommen werden müssen. Dabei haben die Benutzerfreundlichkeit (»Usability«) für alle Anwender*innen und die Barrierefreiheit (»Accessibility«) eine große Schnittmenge.

Für öffentliche Stellen gibt es mit dem Behindertengleichstellungsgesetz (BGG) und der aktualisierten Barrierefreien-Informationstechnik-Verordnung (BITV 2.0) als Umsetzung der EU-Richtlinie (EU) 2016/2102 auch gesetzliche Pflichten zur Barrierefreiheit. Aber in der Praxis ist ein barrierefreies Online-Angebot auch für private Unternehmen so gut wie unerlässlich.

Folgende Fragestellungen helfen Ihnen bei der Optimierung der bestehenden Website, aber idealerweise werden diese Überlegungen bereits in die Planung und Konzeption einbezogen.

Je nach Beeinträchtigung haben Menschen keine Möglichkeit, die Gestaltung Ihrer Website wahrzunehmen. Deshalb sollte darauf geachtet werden, dass der Inhalt auch ohne Gestaltung zusammenhängend verstanden werden kann. Ein semantischer Seitenaufbau ist unerlässlich: Es gibt beispielsweise eine technisch definierte Navigation (mit dem »nav«-Tag oder »ARIA-Roles«), es folgt ein Hauptbereich mit großer Überschrift, folgend der Fließtext, gegebenenfalls mit entsprechend untergeordneten Zwischenüberschriften. Zum Glück brachte die Auszeichnungssprache HTML5 eine Vielzahl von Möglichkeiten, den Inhalt entsprechend aufzubereiten. Hilfstechnologien können den Inhalt anhand dessen leichter deuten und entsprechend verständlich ausgeben. Das klingt ungemein technisch, geht aber mit der Gestaltung Hand in Hand.

Die Frage nach ausreichenden Kontrasten klingt subjektiv, ist aber unter anderem in den Richtlinien für barrierefreie Webinhalte (WCAG) festgelegt und damit messbar. Der »Contrast Checker« der Non-Profit-Organisation WebAIM kann Farbwerte prüfen. Aber auch darüber hinaus ist eine Antwort auf die Frage vielleicht vielschichtiger als gedacht: Es sollte bei der Gestaltung berücksichtigt werden, dass etwa 9 Prozent der Männer und etwa 0,8 Prozent der Frauen eine Rot-grün-Sehschwäche haben. Sie können rote und grüne Gestaltungselemente nicht klar voneinander unterscheiden.

Für sehbehinderten Menschen ist es ebenso von Bedeutung, dass die Inhalte eine angemessene Schriftgröße haben. Auch hier profitieren alle Anwender*innen davon: Wer beispielsweise die Website in ungünstigen Lichtverhältnissen aufruft — vielleicht mit dem Smartphone im direkten Sonnenlicht — kann die Inhalte ebenfalls viel schneller erfassen, wenn die Schrift nicht zu klein ausfällt.

Eine Website muss für die Vergrößerung der Schrift nicht zwangsläufig eine Schaltfläche haben. Je nach technischer Umsetzung kann diese Lösung sogar kontraproduktiv sein. Wichtiger ist, dass die Skalierung clientseitig möglich ist — also auf dem Endgerät. Browser sind selbst in der Lage, Inhalte zu vergrößern und zu verkleinern. Testen Sie es selbst mit der Tastenkombination [STRG] und [+] zum Vergrößern beziehungsweise [STRG] und [-] zum Verkleinern. Das Layout der Website sollte dabei keinesfalls zerstört werden, sondern sich entsprechend anpassen. Mit [STRG] und [0] setzen sie die Skalierung auf den Standardwert zurück.

Verlinkungen und andere Schaltflächen sollten groß genug sein und mit einem entsprechenden Abstand zueinander positioniert sein. Denken Sie nicht nur an die Endgeräte mit Touchdisplay, die ohnehin weniger präzise als Desktop-Computer mit der Maus sind, sondern auch an motorisch eingeschränkte Menschen. Diese haben mitunter große Schwierigkeiten, exakte Mausbewegungen auszuführen.

Bilder sollten einen Alternativtext (»alt«-Attribut) besitzen, damit auch blinde Menschen das Bild und den Gesamtkontext verstehen. Dazu gibt es Bildschirmleseprogramme (»Screenreader«) und andere Hilfstechnologien, die den Inhalt interpretieren und vorlesen. Aber auch Menschen ohne Beeinträchtigung wird dieser Alternativtext gezeigt, wenn beispielsweise die Mobilfunkverbindung mal wieder abreißt und das Bild nicht geladen werden kann.

Des Weiteren können auch Suchmaschinen Bilder nur schwer analysieren. Es sind eben doch nur Maschinen und die künstliche Intelligenz steckt hier wahrscheinlich noch in den Kinderschuhen. Mit Alternativtexten verstehen Suchmaschinen Ihren Content deutlich leichter. Es handelt sich folglich um eine ganz klare Suchmaschinenoptimierung.

Schnell blinkendes Licht und bewegte Muster sollten vermieden werden. Viele Menschen werden sich von diesen Reizen erschrecken oder nur genervt fühlen, für Menschen mit Epilepsie sind sie aber eine Gefahr. Solche Animationen können epileptische Anfälle auslösen. Forscher*innen stellten außerdem fest, dass auch scharf konturierte, kontrastreiche Gittermuster ein Risiko bei fotosensibler Epilepsie ist. Lesen Sie mehr über interaktive und animierte Inhalte und Barrierefreiheit.

Falls darauf nicht verzichtet werden mag, beispielsweise für ein intensiveres Spielerlebnis bei einem Online-Spiel, ist eine Warnung vorweg ratsam. Automatisch abspielende Videos sollten behutsam eingesetzt werden.

Egal ob als YouTube-Video eingebettet oder via HTML5-Player vom eigenen Webspace laufend: Es gibt aus technischer Sicht einfache Möglichkeiten, Videos mit Untertiteln zu versehen. WebVTT-Transkriptionsdateien sind sogar mit beiden genannten Lösungen kompatibel. Damit machen Sie Ihre Videoinhalte auch für eine breite Menge hörgeschädigter Menschen zugänglich.

Lange Schachtelsätze, unnötige Anglizismen und Fremdworte sind für Menschen mit einer Lernbehinderung eine Herausforderung. Eine komplexe Sprache lässt sich nicht vermeiden, wenn man komplexe Sachverhalte wiedergeben will, aber die Leichte Sprache ist für betroffene Menschen ein hilfreiches Zusatzangebot.

Es ging in den Punkten zuvor stets um menschliche Beeinträchtigungen, allerdings gibt es auch Barrieren von rein technischer Natur. Eine Website, die mit Videos und gut aufgelösten Bildern überfüllt ist, verlangt eine hohe Bandbreite und ein gegebenenfalls entsprechendes Datenvolumen beim Mobilfunkanbieter. Andernfalls ist Ihre Website beispielsweise durch erhöhte Ladezeiten kaum nutzbar. Viele Websites sind außerdem immer noch nicht für mobile Geräte optimiert — auch das ist eine klare Barriere.

In der für öffentliche Stellen verpflichtenden »Erklärung zur Barrierefreiheit« wird oft auf kommerzielle Tools verwiesen, die für einen Check der Barrierefreiheit die Preisgabe persönlicher Daten verlangen. Dabei bringt zum Beispiel der Chrome-Browser von Google mit »Lighthouse« ein fantastisches Entwicklertool zum Accessibility-Testing mit. Auch auf barrierefreies.design habe ich mehrere Tools zum Testen entwickelt, unter anderem zum Überprüfen der Kontraste und Farben, zur Simulation von Farbschwächen sowie eine interaktive Checkliste.

Maßnahmen zur Barrierefreiheit sind auch Maßnahmen zur Benutzerfreundlichkeit (»Usability«) und Suchmaschinenoptimierung (»SEO«). In gleich mehrfacher Hinsicht erhöhen Sie damit Ihre Reichweite: Ihre Website kann von den Suchmaschinen besser verstanden und in der Folge besser gefunden werden, vor allem machen Sie Ihre Inhalte aber mehr Menschen zugänglich (»Accessibility«).