Barrierefreie Websites

Barrierefreie Websites

Virtue Signaling oder nachhaltiges Investment?

Websites mit dem Fokus „Barrierefreiheit“ bieten viele Vorteile. Abgesehen davon, dass sie eine oft unterschätzte Usergruppe erschließen, können Websites für zum Beispiel sehbehinderte Personen auch Vorteile im Bereich SEO bieten.

In der digitalen Welt gewinnen Konzepte wie Nachhaltigkeit und soziales Verantwortungsbewusstsein immer stärker an Bedeutung. Es ist daher nicht verwunderlich, dass sich Webdesigner zunehmend mit dem Thema Barrierefreiheit im Internet beschäftigen. Dabei ist dieses Thema gar nicht neu! Schon der Begründer des World Wide Webs erkannte:

Auch wir von der Online-Agentur CBRA sehen uns diesem Grundsatz verpflichtet. Darum möchten wir in diesem Beitrag darüber aufklären, wie auch Sie mit nur wenigen Tricks eine barrierefreie Website erstellen können.

Warum auch Sie Ihre Website barrierefrei gestalten sollten

Eine Website barrierefrei zu gestalten ist immer mit einem gewissen Aufwand verbunden – vor allem, wenn es sich um eine bereits bestehende Seite handelt. Warum also sollten Webmaster ihre wertvolle Zeit damit verschwenden, ihre Sites zugänglicher zu machen? Ganz klar: weil jeder davon profitiert!

Barrierefreie Websites ermöglichen Menschen mit Behinderungen die aktive Teilnahme am Internet. Das stellt nicht nur für Behinderte selbst einen Mehrwert dar. Es bedeutet im Umkehrschluss auch, dass barrierefreie Inhalte einem potenziell größeren Publikum zugänglich sind. Wer seinen Webauftritt also behindertengerecht gestaltet, erleichtert nicht nur seinen Mitmenschen den Umgang mit dem Netz, sondern erhöht auch die Reichweite seines eigenen Angebots.

Darüber hinaus profitieren nicht nur Personen mit Sehbeeinträchtigung von leicht zugänglichen Inhalten. Häufig sind die Richtlinien für barrierefreies Webdesign nämlich identisch mit den Best Practices für Übersichtlichkeit, Lesbarkeit und Ästhetik einer Website. Dazu kommt, dass auch Nichtbehinderte sich häufig in Situationen wiederfinden, in denen sie Internetseiten nur eingeschränkt benutzen können – zum Beispiel, wenn helles Sonnenlicht den Bildschirmkontrast verschlechtert.

Eine Website barrierefrei zu gestalten, kann aber auch Vorteile im Bereich SEO bieten. Suchmaschinen wie Google analysieren Webseiten mit Hilfe automatisierter „Webcrawler“ oder „Bots“. Diese Computerprogramme können Internetseiten ebenso nur eingeschränkt erfassen und beispielsweise Bilder nur anhand deren Alternativtexte identifizieren und zuordnen. Für Webcrawler ist also die Optik eines Bildes zum Beispiel ebenso fremd, wie für Menschen mit Sehbehinderung. Ähnlich verhält es sich mit Audiodateien für Gehörlose. Wenn aber Alternativen zu Bild und Ton (wie zum Beispiel Alt-Attribute bei Bildern) bereitgestellt werden, erleichtert das nicht nur den Zugang für beeinträchtigte Personen, sondern auch für die Webcrawler der Suchmaschinen.

Welche Barrieren gibt es eigentlich?

Welchen Barrieren sich Menschen mit Behinderung gegenübersehen hängt stark von ihren jeweiligen Einschränkungen ab. Ein blinder Mensch wird sich mit anderen Herausforderungen konfrontiert sehen als ein Gehörloser. Zu den häufigsten Einschränkungen bei der Navigation im Web gehören:

• Websites können nicht richtig verwendet werden, da eine körperliche Behinderung die Bedienung einer Computermaus erschweren oder unmöglich machen
• zu kleiner Text, der entweder nur sehr schwer oder gar nicht gelesen werden kann
• schwacher Kontrast, der Personen mit Sehschwäche die Aufnahme des Gesehenen zusätzlich erschweren
• falsch oder schlecht verwendetes HTML macht den Einsatz von Screenreadern schwierig
• Farbe wird als Informationsträger verwendet („der grüne Button“), obwohl Menschen mit Sehbehinderung diese Informationen nicht verarbeiten können
• Videos ohne Untertitel sind für Gehörlose prinzipiell nicht zu verstehen
• motorisch eingeschränkte Menschen brauchen mehr Zeit, um mit einer Website zu interagieren – Zeitbegrenzungen stellen für sie ein großes Hindernis dar

Obwohl es eine solche Vielzahl von unterschiedlichsten Barrieren gibt, lassen sie sich alle mit etwas Einsatz beseitigen. Oft sind es nicht ihre eigenen Einschränkungen, welche behinderten Personen den Zugang zu einem Webangebot verwehren, sondern nicht optimiertes Webdesign. Damit solche Designfehler vermieden werden können, ist nicht nur Empathie gegenüber beeinträchtigten Personen notwendig, sondern auch die Kenntnis ihrer Probleme. Professionelle Webdesigner sollten sich deshalb stets darüber informieren, mit welchen Barrieren sich die User einer Seite, also die Zielgruppe, möglicherweise konfrontiert sehen könnten.

Wie können barrierefreie Websites gestaltet werden?

Eine Website barrierefrei zu gestalten, ist nicht immer eine einfache Aufgabe. Obwohl viele moderne Internetauftritte durch richtig eingesetztes HTML und schlankes Design bereits viele Kriterien der Barrierefreiheit erfüllen, ist auf manchen Webseiten ein kompletter Rework nötig. Das ist vor allem dann der Fall, wenn Barrieren bereits im grundlegenden Konzept einer Website vorkommen.

Um solche Barrieren zu vermeiden und ein (häufig teures und zeitaufwändiges!) Redesign überflüssig zu machen, sollte schon bei der Erstellung einer Website Rücksicht auf die wichtigsten Richtlinien für barrierefreie Internetseiten genommen werden. Besagte Richtlinien können dabei grob in zwei Kategorien eingeteilt werden:

• Richtlinien für konzeptionelle Barrierefreiheit und
• Richtlinien für technische Barrierefreiheit.

Konzeptionelle Barrierefreiheit

Das gewählte Farbschema gehört zu den grundlegendsten Elementen einer Website. Gerade die Wahl von problematischen Farben kann für Menschen mit Sehbehinderungen aber ein großes Hindernis darstellen. Um diese Menschen nicht vor unnötige Probleme zu stellen, sollten Webdesigner bei der Auswahl des Farbschemas auf folgende Punkte achten:

• Hoher Kontrast: Ein ausreichend hoher Kontrast zwischen Schrift- und Hintergrundfarbe ist eine Voraussetzung dafür, dass Menschen mit Sehschwäche eine Website richtig lesen können. Selbst für Personen ohne eine solche Beeinträchtigung ist eine kontrastreiche Seite einfacher zu konsumieren und beugt einer Ermüdung der Augen vor.
• Stimmige Farbauswahl: Das Farbschema einer Seite sollte – wenn möglich – aus Komplementärfarben bestehen. Solche Farben spielen gut zusammen und vermitteln ein stimmiges Bild. Aber Achtung: Komplementärfarben sollten nicht hart ineinander übergehen! Das kann zu einem zu starken Kontrast führen. Daher ist es ratsam, sie mit neutralen Zwischenfarben abzugrenzen.
  
• Bestimmte Farbkombinationen vermeiden: Ungefähr 9% aller Männer (aber nur 0,8% aller Frauen) leiden unter einer Rot-Grün-Sehschwäche. Um eine Website für diese Menschen barrierefrei zu gestalten, sollte auf den Einsatz von Rot-Grün-Kontrasten verzichtet werden. Eine ähnliche, aber weniger weit verbreitete Sehstörung ist die Blau-Gelb-Schwäche.

Neben dem unbedachten Einsatz von Farben ist ein inhaltlich unordentlicher Aufbau von Webcontent ein weiterer Grund für das Vorhandensein von unnötigen Barrieren. Der Inhalt einer barrierefreien Website sollte stets so aufgebaut sein, dass er ohne Probleme der Reihe nach (linear) konsumiert werden kann. Um das zu ermöglichen, sollte unter anderem auf folgenden Punkt geachtet werden:

• Verwendung leicht verständlicher Sprache: Webtexte sollten in einer möglichst verständlichen Sprache verfasst sein. Dass bedeutet, dass auf lange Sätze und einen komplexen Satzbau verzichtet werden sollte. Fremdwörter sollten ebenfalls so weit als möglich vermieden werden. Wenn Fachausdrücke unabdingbar sind, sollten sie zumindest erklärt werden.

Werden diese Richtlinien eingehalten, können viele potenzielle Barrieren bereits vermieden werden. Um eine Website aber auch für Menschen barrierefrei zu machen, die auf Hilfsgeräte wie Screenreader angewiesen sind, muss sie zusätzlich auch technisch optimiert sein.

Technische Barrierefreiheit

Generell gilt, dass Content mit dafür vorgesehenen HTML-Elementen sinnvoll strukturiert werden sollte und CSS und JavaScript ausschließlich für das Design und die Interaktivität von Elementen verwendet werden. Ist dies nicht der Fall, können weder Screenreader noch Webcrawler eine Seite korrekt interpretieren. Folgende Punkte gehören dabei zu den Grundvoraussetzungen für einen technisch barrierefreien Aufbau von Webcontent:

• Trennung von Inhalt, Form und Verhalten: Für gutes HTML (und damit gutes Webdesign) gilt der Grundsatz, dass es nur für den Inhalt und die Struktur einer Website zuständig ist. Für die visuelle Gestaltung (Farben, Schriftgröße, etc.) sollte ausschließlich CSS verwendet werden. Das Verhalten einer Website (Pop-Ups, interaktive Elemente) wird letztlich über JavaScript gesteuert. Diese Trennung von Inhalt, Form und Verhalten sollte dabei nicht nur konzeptionell sein, sondern auch praktisch. Das bedeutet, dass CSS und JavaScript nicht direkt in HTML-Dateien eingebaut, sondern in externe Dateien ausgelagert sein sollte.
• Überschriftenhierarchien: Überschriften sollten mit den HTML-Tags, zum Beispiel h1, h2 etc. ausgezeichnet werden. Darüber hinaus sollten diese Elemente hierarchisch geordnet sein.
  Das bedeutet, dass unterhalb eines h2-Elements ein (oder mehrere) h3-Elemente stehen sollten. Diese h3-Tags können h4-Tags übergeordnet sein. Was vermieden werden sollte, sind h4-Elemente, die zum Beispiel direkt h2-Elementen untergeordnet sind. Dieser Struktur folgend sollte auch der Inhalt einer Website aufgebaut sein.
• Verwendung von semantisch sinnvollem HTML: Wann immer auf einer Seite Listen, Buttons oder Bilder vorkommen, sollte diese mit den dafür vorgesehenen HTML-Tags (zum Beispiel ol oder ul für nummerierte bzw. nicht-nummerierte Listen) ausgezeichnet werden. Dadurch können diese Elemente von Browsern und Ausgabehilfen (und anderen Entwicklern) leichter verstanden und eingeordnet werden.
• Alt-Texte für Bilder: Menschen mit Sehbehinderung brauchen Screen-Reader, um eine Website benutzen zu können. Diese Programme lesen ihren Benutzern (unter anderem) die beschreibenden Alternativtexte für Bilder vor. Voraussetzung dafür ist, dass Bilder von Webdesigner mit aussagekräftigen Alt-Texten versehen worden sind. Alt-Texte kommen allerdings auch dann zum Einsatz, wenn Bilder nicht korrekt geladen werden können (zum Beispiel durch eine schlechte Internetverbindung) und sind damit nicht nur für Behinderte hilfreich.
• Klare Beschriftung von Formularfeldern und Buttons: Eingabe- und Interaktionselemente, wie Buttons und Formularfelder, sollten mit klar verständlichen Labels gekennzeichnet werden. Das hilft Menschen mit Einschränkungen dabei, sich auf einer Seite zurechtzufinden. Technisch umgesetzt werden kann dieser Anspruch durch die Verwendung des label-Tags.

Wie kann eine Website auf Barrierefreiheit getestet werden?

Für alle Webmaster, die ihre Sites auf Barrierefreiheit testen möchten, stehen eine Vielzahl von Online-Tools zur Verfügung. Wir von der Online-Agentur CBRA benutzen zur Evaluierung der von uns betreuten Websites zum Beispiel WAVE. Dieses steht sowohl in einer Web-Version zur Verfügung, als auch als Browser-Erweiterung für Chrome und Firefox. Das Tool zeichnet sich vor allem dadurch aus, dass es nicht nur die (HTML-)Struktur einer Seite überprüft, sondern zum Beispiel auch Farbkontraste.

Wer sich nicht allein um die Barrierefreiheit seines Webauftritts kümmern möchte, der kann sich natürlich auch gerne an CBRA wenden – als Digitalagentur mit sozialem Gewissen übernehmen wir gerne die Aufgabe, eine Website barrierefrei zu machen.