Barrierefreie Website: Erreichen Sie mehr Menschen im Netz

Barrierefreiheit im Internet gewährleistet, dass Nutzer mit unterschiedlichsten Einschränkungen und Bedürfnissen Webangebote uneingeschränkt und ohne fremde Hilfe nutzen können. Der Zweck von barrierefreiem Webdesign ist folglich, die Ausgrenzung bestimmter Personengruppen im Netz – zum Beispiel von körperlich oder geistig behinderten Menschen – zu verhindern. Zudem erfüllt eine barrierefrei gestaltete Website sowohl EU-Richtlinien als auch deutsches Recht. Ein nicht unwesentlicher Faktor für Unternehmen: Barrierefreie Websites erreichen einen größeren Kundenkreis, da sie mehr Leuten zugänglich sind als nicht barrierefreie Seiten. Darüber hinaus verbessern Sie mit barrierefreiem Webdesign auch Ihr Suchmaschinen-Ranking.

Generell sind Barrieren Hindernisse, die uns vom Weiterkommen abhalten – sie machen die Teilhabe schwierig. Im Netz werden sie oft unwissentlich errichtet. Im Rahmen des Projekts „Barrieren Melde- und Monitoringstelle“, das vom März 2015 bis März 2017 lief, wurden Fälle erfasst, in denen bestimmte Menschengruppen durch den schlecht gestalteten Aufbau von Webinhalten oder Service-Terminals an deren problemlosen Nutzung gehindert wurden.

Erfasst hat man beispielsweise Service-Schalter bzw. -Terminals, die für Menschen mit Gehbehinderung nur schwer erreichbar waren. Ebenso auch Websites, die zur Verifizierung Captchas mit Zeichen und Bildern nutzten, die von Menschen mit Sehschwäche kaum oder gar nicht zu entziffern waren. Nachdem die Meldestelle solche Probleme aufgenommen hatte, leitete sie die Meldung an die jeweiligen Webseiten-Betreiber weiter. Die Antworten ließen tief blicken: Viele Verantwortliche hatten von Barrieren im Netz vorher nichts gehört. Eines der Kernmotive von Tim Berners-Lee, dem Gründer des World Wide Web (W3), lautete jedoch, dass Websites für möglichst viele Besucher nutzbar sein sollten. Die erste veröffentlichte Webseite war verhältnismäßig einfach gestaltet und formulierte die Zielsetzung des W3-Projekts folgendermaßen:

• Das Unternehmen zeigt soziale Verantwortung (Corporate Social Responsibility). Das lässt sich auch gut für PR-Maßnahmen nutzen.
• Es reduziert das Risiko, wegen Diskriminierung einen Image-Schaden zu erleiden.
• Suchmaschinenoptimierung sowie Usability der Website werden positiv beeinflusst.
• Die Zahl der möglichen Nutzer steigt, und damit einhergehend wachsen meist auch Marktanteil und Gewinne.
• Das Unternehmen stärkt die Teilhabe von Mitarbeitern mit Behinderung

Dies sind nur einige Vorteile digitaler Inklusion. Mehr über die positiven Seiten von Barrierefreiheit im Internet erfahren Sie im Artikel „Developing a Web Accessibility Business Case for Your Organization“ (Shawn Lawton Henry and Andrew Arch, eds. Copyright © 2012 W3C® (MIT, ERCIM, Keio). Wenn Sie mehr über die allgemeinen Standards zur Barrierefreiheit im Netz erfahren wollen, lesen Sie unseren Artikel WCAG – Richtlinien des W3C für gut zugängliche Webinhalte.

Die uneingeschränkte Teilhabe im Internet ist für viele Menschen selbstverständlich. Aber es gibt Personengruppen, die aus unterschiedlichsten Gründen bestimmte Webangebote nicht nutzen können. Das W3C hat fünf Faktoren bestimmt, die für Nutzer bedeutsam sind, um uneingeschränkt am Internet teilhaben zu können. Die entsprechenden Schlagworte sind: Wahrnehmung, Verständnis, Navigation, Interaktion und Beitragen. Im Folgenden erklären wir die Begriffe näher.

Viele Websites beinhalten blinkende Anzeigen, die Kommentarspalten sind mit Text geringer Schriftgröße gefüllt und mitunter ertönt sogar Hintergrundmusik, die Stimmung oder Thema der Seite unterstreichen soll. Je nach Art und Grad der Einschränkung nehmen einige Besucher Ihrer Website diese Elemente jedoch nicht vollständig oder gar nicht wahr. Blinde Menschen navigieren beispielsweise ohne visuelle Reize durch das Internet. Stattdessen liest ein Screen Reader die Website aus. Das Gerät übermittelt die lesbaren Daten an sogenannte Unterstützungstechnologie. Eine Braillezeile zum Beispiel kann den Text in Blindenschrift umwandeln. So nimmt die Person Ihre Website über den Tastsinn wahr. Ein Text-to-Speech-Tool gibt die Inhalte im Audioformat wieder. Mit dieser Technologie nutzt ein User sein Gehör, um Website-Inhalte zu verarbeiten. Im gerade angeführten Beispiel stört dann allerdings die Hintergrundmusik.

Menschen mit einer weniger starken Sehbehinderung, dazu zählen auch viele Senioren, erfassen den Inhalt Ihrer Website zwar mit den Augen, sind aber auf ein stark vergrößertes Bild angewiesen. Menschen mit Farbfehlsichtigkeit hingegen erkennen Warnhinweise nicht, die lediglich durch Farbe ausgedrückt werden. Gehörlose Menschen auf der anderen Seite nehmen die Informationen einer reinen Audio-Datei und einen großen Teil von Video-Dateien nicht wahr. 

Sehr junge Nutzer, Senioren oder Menschen mit kognitiven Beeinträchtigungen haben mitunter Schwierigkeiten mit dem Verständnis eines Texts voller moderner Fachbegriffe oder unerklärter Abkürzungen. Auch wenn die Website Inhalte, die thematisch zusammengehören, weit entfernt voneinander darstellt, erschwert das vielen Menschen, den Zusammenhang zu erkennen.

Da inzwischen immer mehr Menschen Websites via Smartphone besuchen, ist es für sie äußerst ärgerlich, wenn sich die Links nicht präzise mit dem Finger auswählen lassen. Ist die Website nicht für Smartphones optimiert und liegen Links in geringer Schriftgröße dicht beieinander, ist das für ältere Menschen mit zitternden Händen sehr unpraktisch. Für Menschen mit körperlicher Behinderung wurden inzwischen allerdings zahlreiche Tools entwickelt, mit denen sie Computer leichter bedienen können: Zu diesem Zweck erfassen einige Tools die Augenbewegungen, während andere Technologien über die Tastatur genutzt werden. Prinzipiell sollte die Website so gestaltet sein, dass sie sich über solche unterstützenden Technologien auswerten lässt: Ist Ihre Internetpräsenz damit nicht navigierbar, haben potenzielle Kunden, die darauf angewiesen sind, keine Chance, Ihr gesamtes Angebot zu nutzen.

Sollen User ein Formular ausfüllen, etwa zur Newsletter-Anmeldung, kommt es dabei nicht selten zu Fehlern. Das Passwort ist zu kurz oder das Geburtsdatum passt nicht in die vorgegebenen Parameter. Formulieren Sie daher klare Hinweise zur Fehlerbehebung. Die Interaktion mit einer Website umfasst auch die Navigation. User, die Geräte mit kleinem Display nutzen oder mit starker Bildschirmvergrößerung arbeiten, brauchen darauf angepasste Navigationswege und sind auf eine übersichtliche Struktur der Website angewiesen.

Kommentarspalten ermöglichen Ihren Usern, Feedback zu geben. Über sie können sie ihre Meinung zu einem Produkt oder Inhalten kundtun oder sich mit anderen Nutzern austauschen. Menschen mit Sehbehinderung nutzen beim Schreiben am Monitor oft eine Bildschirmlupe. Damit erscheinen die Elemente deutlich größer und der Abstand zwischen Lesespalte und Eingabefeld wächst. Arrangieren Sie die Elemente daher optisch dicht beieinander und erleichtern Sie Ihren Nutzern so den Austausch.

Über Formulare erhalten Sie Feedback oder Bestellungen von Ihren Kunden. Integrierte Rechtschreibprogramme zeigen dabei oft Fehler an, indem sie falschgeschriebene Worte rot hervorheben. Der eingefärbte Text unterscheidet sich für Menschen mit Farbfehlsichtigkeit mitunter aber nicht vom restlichen Text. Denken Sie daher immer auch an eine zusätzliche Markierung (beispielsweise in Form von Unterstreichungen).

Wenn Sie online Barrieren abbauen, verbessert das die Usability Ihrer Website und somit auch Ihr Google-Ranking. Barrierefreies Webdesign lohnt sich daher auch wirtschaftlich und erfordert einen nur geringen Mehraufwand. W3C empfiehlt zur Kontrolle der eigenen barrierefreien Website diverse Test-Tools. Die W3C-Testnoten vergeben jedoch nur erfahrene, menschliche Tester, die die Website ganzheitlich überprüfen. Dabei nehmen sie die ganze Website unter die Lupe und bescheinigen unterschiedliche Stufen der Accessibility (Zugänglichkeit): Von A („geringe Barrierefreiheit“) bis AAA („hohe Barrierefreiheit“).

Strukturieren Sie Ihre Website übersichtlich und verwenden Sie nutzerfreundliche Sprache. Damit ziehen Sie mehr Leser an und verbessern gleichzeitig Ihr Google-Ranking (denn die Suchmaschinen werten auch die Lesbarkeit von Texten aus). Wollen Sie weiterhin für gutes SEO sorgen und die Architektur Ihrer Website nachvollziehbar und übersichtlich gestalten, dann achten Sie auch auf folgende Aspekte:

• Klare Benennung von URLs und Inhalten: Die Ausrichtung und das grundlegende Thema der Website sollten auf jeder Unterseite leicht erkennbar sein.
• Nachvollziehbare Struktur: Die Nutzer sollten immer wissen, an welchem Punkt der Website sie sich befinden.
• Flache Hierarchien: Wenige Klicks führen zum Inhalt.
• Trennung von Layout und Inhalt: Nutzen Sie CSS für die Gestaltung.
• Kategorien mit nutzerfreundlichem Aufbau: Unterseiten haben für Nutzer eine intuitiv erfassbare semantische Verbindung zur übergeordneten Seite.
• Webgerechte Darstellung aller Inhalte
• Nutzerfreundliche Sprache: Formulierungen sind leicht verständlich oder werden näher erklärt.
• Wichtige Website-Bereiche wie Kontakt, Impressum, Suchfeld oder Startseite erreichen die Nutzer von jeder Unterseite mit nur einem Klick.
• Navigationselemente sind klar erkennbar und auf jeder Seite gleich strukturiert.
• Größere Webpräsenzen stellen eine Site Map zur Verfügung, Für häufige Fragen steht ein FAQ bereit.
• Skalierbare Schriften, Farben und anpassungsfähiges Layout erleichtern die Darstellung auf unterschiedlichen Endgeräten und in verschiedenen Browsern. Idealerweise sind sie kompatibel mit Unterstützungstechnologie.
• Die Website ist mit Maus und Tastatur bedienbar.
• Alternativtexte für Bilder: Sie sind notwendig, da Screen-Reader wie auch Searchbots nur Textinhalte erfassen können.

Personen, die unter epileptischen Anfällen leiden, sind gefährdet, wenn eine Website Grafiken oder Videos enthält, die in einer Sekunde mehr als dreimal aufflackern. Wissenschaftler haben zudem festgestellt, dass scharf konturierte Gittermuster mit hohem Kontrast bei Personen mit fotosensibler Epilepsie ebenfalls Anfälle auslösen können.

Berücksichtigen Sie barrierefreies Webdesign auch im täglichen Ablauf. Für die Suchmaschinenoptimierung, zu PR-Zwecken oder um neue Verkaufsangebote zu präsentieren, laden Sie schließlich tagtäglich neuen Content hoch. Erleichtern Sie Ihren Besuchern den Zugriff darauf, indem Sie die Informationen auf deren Bedürfnisse abstimmen. Ein grundlegender Bestandteil der barrierefreien Website, der auch bei der Suchmaschinenoptimierung eine Rolle spielt, ist die Vergabe des Alternativtexts für Bilder. Crawler und Screenreader können Bildinhalte nicht auswerten – das gilt aber ebenso für blinde Nutzer. Der Alternativtext informiert daher über den Inhalt des Bildes. Aber auch Besucher mit schlechter Internetverbindung, aufgrund derer Bilder langsam oder gar nicht laden, profitieren von Alt-Texten. 

Ein umfangreicheres Unterfangen ist die kontinuierliche und zeitnahe Erstellung von Transkripten und Untertiteln. Mit diesen Hilfsmitteln können Sie die Informationen von Audio-Content für Gehörlose aufbereiten. Das Transkript, das Gesprochenes sowie Klänge und Geräusche in Textform wiedergibt, platzieren Sie zu diesem Zweck möglichst nah am jeweiligen Audio-Content – zum Beispiel durch einen Button mit Link zum Dokument. Untertitel erleichtern Menschen ohne Gehör das Verständnis von Webvideos ganz erheblich. Auch Nutzer, die die Sound-Wiedergabe nicht nutzen möchten (beispielsweise, weil sie ihr Umfeld nicht mit Lärm belästigen wollen), profitieren von dieser Funktion. Menschen mit kognitiven Beeinträchtigungen oder Verhaltensstörungen wie ADHS nehmen ähnlich wie Menschen mit Hörschäden Informationen, die über Videos vermittelt werden, besser auf, wenn sie Hintergrundgeräusche mithilfe einer Videoplayer-Einstellung ausschalten können.

Menschen mit einer Sehschärfe von weniger als 30 % gelten als sehbehindert, bei einer Sehschärfe von weniger als 2 % sogar als blind. Visuelle Reize nehmen sie nur bedingt oder gar nicht wahr. Damit diese Menschen ihren Video-Content verstehen können, sollten Sie ihn mit einer zusätzlichen Audiospur ergänzen. Über diese liefern Sie Erklärungen zu visuellen Komponenten wie Ort und Landschaft, Personen und beschreiben kurz sichtbare Handlungen. Platzieren Sie solche Erklärungen in die Gesprächs- und Tonpausen der Original-Audioaufnahme, damit die Tonspuren sich nicht überschneiden.

Eine kurze Einführung zum Thema Audioerklärung und wie Sie sie in ein Video einbauen, zeigt das folgende Video. Die beigefügten Closed Captions sind zudem ein Beispiel für die inklusive Content-Aufbereitung für Hörgeschädigte.

Leichte Sprache drückt Inhalte sehr simpel aus. Sie hilft Menschen mit kognitiven Behinderungen, komplexe Sachverhalte besser zu verstehen. Sie vermeidet zum Beispiel den Konjunktiv, Synonyme und Verneinungen. Sätze in leichter Sprache sind kurz und haben nur eine inhaltliche Aussage. Seit 2006 regelt das Netzwerk Leichte Sprache die Standards für diese Verständnishilfe. Dazu gehören auch Tipps für gut lesbare Typografie, eigene Rechtschreibregeln und Empfehlungen, wie man Text und Bild verbindet.

Menschen mit kognitiven Einschränkungen haben das gleiche Recht auf Information wie alle anderen auch. Deshalb stellen Tageszeitungen auf ihren Online-Plattformen als gutes Beispiel für barrierefreie Websites zunehmend Versionen ihrer Artikel in leichter Sprache bereit. Auch öffentliche Einrichtungen nutzen vermehrt leichte Sprache für Informationstexte.

Eine weniger strenge Form ist die sogenannte einfache Sprache, die etwa dem Sprachniveau A2 oder B1 entspricht. 

Screenreader und andere Unterstützungstechnologien machen Barrierefreiheit im Internet für viele erst möglich. Die Programme arbeiten Webdokument von links nach rechts und von oben nach unten vollständig ab. Sie arbeiten streng linear. Deshalb sollten Sie Layout und Design voneinander trennen. Andernfalls arbeiten die Screenreader die Seite falsch auf. Tragen Sie dazu bei, dass Nutzer auf Ihrer Website effektiv navigieren können, indem Sie folgende Grundregeln beachten.

Frame-Sets sind ein beliebtes Tool für Webseitengestalter. Durch den fehlenden seitenrelevanten Inhalt der zugrundeliegenden Frame-Set-Dokumente entsteht allerdings ein Problem: Crawler lesen die für sie gehaltlose Startseite aus und platzieren diese entsprechend weit unten im Suchmaschinen-Ranking. Auch Screenreader der ersten Stunde konnten Frames nicht erkennen. Sie waren nur mit Textbrowsern kompatibel, die lediglich die Bezeichnung des Frames darstellen. Neue Versionen von Screenreadern lassen sich jedoch mit fast allen Browsern verwenden.

Screenreader übermitteln Textinformationen an Sprachausgabe-Software und Braillezeilen. Dafür lesen Sie die Seite von oben bis unten aus – das beinhaltet auch wiederkehrende Elemente wie die Navigationsleiste, Icons oder Links zu untergeordneten Seiten. Damit die Reader diese Information nicht bei jeder geöffneten Seite unnötig wiederholen, sollten Sie Skip-Navigation-Links (kurz: Skip-Links) einbauen. Auch Nutzer, die nur mit der Tastatur navigieren, möglicherweise mit einem Mundstück, haben extrem viel Mühe, wenn sie sich durch etliche Elemente klicken müssen. Sie profitieren von einem Skip-Link am Seitenanfang, der möglichst gut sichtbar ist:

Es gibt Skip-Links, die im Layout unsichtbar sind, doch der Screenreader übermittelt dem Nutzer die Nachricht des Alternativtexts: „Navigation überspringen“, wenn der Code wie folgt aussieht: 

Es ist wichtig, dass Skip-Links möglichst weit vorne im Code steht. Den Ankertext setzen Sie am Anfang des Hauptinhalts:

Setzen Sie den Skip-Links sparsam ein, da eine Häufung den positiven Effekt wieder zunichtemacht und dazu führt, dass Nutzer sich durch zu viele Elemente klicken müssen. Eine elegantere Lösung ist die Verwendung von ARIA-Landmarks und eine gute Strukturierung des Dokuments. WebAIM empfiehlt die Verwendung von HTML5-Elementen. Die aktuellen Browser unterstützen diese Methode jedoch noch nicht vollständig. Eine weitere Hilfe wäre ein Inhaltsverzeichnis am Anfang des Dokuments, das Nutzer via Inpage-Links zu den jeweiligen Abschnitten weiterleitet. Moderne Screenreader lesen die entsprechenden Überschriften vor. Wenn Sie mit aussagekräftigen, gut strukturierten Überschriften arbeiten, erhöhen Sie die Lesbarkeit sowohl für Suchmaschinen als auch für Unterstützungstechnologien.

Für barrierefreie Webseiten nach W3C-Richtlinien nutzen Sie idealerweise nur Datentabellen. Screenreader haben mit diesem Format weniger Probleme, die Informationen nach der Umwandlung sinnvoll wiederzugeben. Layout-Tabellen hingegen geben der Seite eine optische Struktur, erschweren Screenreadern aber, den Inhalt verständlich wiederzugeben. Diese Art der Webseitengestaltung ist zwar noch immer recht beliebt, mit den neusten Versionen von Netscape aber nicht unbedingt notwendig.

Jan Eric Hellbusch gibt Tipps zum barrierefreien Webdesign. Er rät dazu, Layout-Tabellen, wenn man sie für unbedingt nötig erachtet, lediglich mit einfachen Elementen zu definieren: TABLE, TR, und TD (jeweils: Tabelle, Reihe und Zelle). Setzen Sie strukturierende Elemente ein, um Verknüpfungen von Zellen logisch zu gestalten, dann liest der Screenreader die Layout-Tabelle wie eine Datentabelle. Sie wirken dem direkt entgegen, wenn Sie dazu bestimmte Tabellenelemente aus dem Accessibility-Tree entfernen. Für Ihre barrierefrei Website nutzen Sie wie im Beispiel den Code role=“none“. Dieser gilt für die Tabelle und deren Kinderelemente. Wenn Sie Tabellen in Tabellen packen, müssen Sie beide Elemente damit definieren.

Beispiel:                                                                                                                                                 

So wird es in der Schnittstelle angezeigt: