So sieht barrierefreies Webdesign wirklich aus

Webdesign erfindet sich ständig neu und vollbringt im Kampf um die Aufmerksamkeit im Netz Höchstleistungen. Leicht übersehen wird dabei die große Gruppe von Userinnen und Usern, die das Design nicht nutzen kann. Lesen Sie hier, warum eine von zehn Personen Ihre Webseite vielleicht nie nutzen wird und wie Sie durch barrierefreies Webdesign mehr Reichweite und ein inklusives Erlebnis für möglichst alle schaffen.

Was versteht man unter barrierefrei?

Die Umgebungen, in denen wir uns täglich aufhalten, sind hochgradig gestaltet. Das Design von Gebäuden und Produkten sowie von Onlineinhalten und Anwendungen im Netz richtet sich an Menschen, die die Designer und Entwicklerinnen als Normaltyp wahrnehmen.

Das geschieht unterbewusst, weil Menschen von sich selbst als Norm ausgehen. Und es passiert unter hohem Druck: Design soll wenig Zeit, Aufwand und Geld kosten, dabei möglichst schön, außergewöhnlich und nützlich sein.

Dieser Prozess grenzt von vornherein Gruppen aus, die dieser Norm nicht ausreichend entsprechen und darum an einer bestimmten Stelle Räume, Produkte und auch Onlineangebote nicht nutzen können. Das können Menschen mit körperlicher oder geistiger Behinderung sein, aber auch weiter gefasst Menschen in Lebenssituationen, auf die das Design einfach nicht abgestimmt ist.

Barrierefreies Webdesign ist also erst einmal eine gute Sache, weil durch Inklusion mehr Menschen besseren Zugang zur digitalen Welt erhalten. Sie ist aber auch wirtschaftlich eine gute Idee, denn Sie können damit Ihre Zielgruppe und Reichweite vergrößern: Fast 10 Prozent der Menschen in Deutschland leben mit einer schweren körperlichen oder geistigen Behinderung. Und dies sind nicht die einzigen Hindernisse. Durch besondere Lebenssituationen, Arbeitsorte, Sprachbarrieren oder ein geringes Bildungsniveau kann der Zugang zu jeglicher Art der Information verwehrt bleiben.

Barrierefreiheit vs. Universal Design

Im mitteleuropäischen und angelsächsischen Kulturkreis gibt es unterschiedliche Ansätze, um mit diesen Ausgrenzungen umzugehen.

In Deutschland und Europa steht der Begriff der Barrierefreiheit im Fokus: Für Menschen mit Behinderungen sollen Hürden abgebaut und Alternativen angeboten werden, die möglichst alle Menschen einschließen und gleichstellen.

In den USA und im angelsächsischen Raum entstand die Idee des Universal Design: Hier geht es darum, von Anfang an möglichst keine Personengruppen auszuschließen. Daraus folgt ein breiterer, aber auch theoretischerer Ansatz, um mit grundlegenden Prinzipien zugänglichere Produkte zu entwickeln.

Wann ist eine Website barrierefrei?

Wichtige Grundsätze für barrierefreies Webdesign sind im Behindertengleichstellungsgesetz formuliert. Ergänzungen zur Umsetzung enthält die BITV 2.0, die Verordnung zur Schaffung barrierefreier Informationstechnik. Barrierefreie Webseiten müssen demnach:

• auffindbar, zugänglich und nutzbar sein,
• in allgemein üblicher Weise,
• ohne besondere Erschwernis,
• ohne fremde Hilfe und
• unter Nutzung behinderungsbedingt notwendiger Hilfsmittel (Screenreader, Vergrößerung, Vorlesesoftware, etc.).

Für die Anwendung im Webdesign sind diese Vorgaben unter dem Begriff der Web Accessibility detaillierter ausgearbeitet. Webseiten sollten Konformität mit dem aktuellen WCAG-Standard anstreben. Dieser bewertet die Barrierefreiheit in drei Stufen A, AA und AAA mit Kriterien, die in unterschiedlichem Grad messbar und testbar sind.

Dabei gilt die mittlere Stufe als sinnvolles und ambitioniertes Ziel. Die Konformität können Sie als Webseitenbetreiber von unabhängigen Expertinnen und Experten prüfen lassen.

Allerdings sind auch diese Standards weit davon entfernt, jede denkbare Hürde abzudecken. Ein Beispiel ist das Thema der Verständlichkeit: Es spielt im aktuellen Standard nur eine untergeordnete Rolle. Das heißt, eine vollständig konforme Webseite schließt Personenkreise mit geringer Sprachbeherrschung, niedrigem Bildungsniveau oder geistiger Behinderung potenziell immer noch aus.

Was sind barrierefreie Inhalte?

Eine Definition barrierefreier Inhalte ist praktisch kaum möglich, weil immer Situationen auftreten können, die die Nutzung erschweren. Sinnvoller ist die Definition bekannter Störfaktoren, für die Webdesigner aktiv Lösungen und Alternativen schaffen können.

Diese Störfaktoren nehmen viele Nutzergruppen und Situationen in den Blick. Die größten Gruppen sind:

• Blinde und sehbehinderte Menschen
• Gehörlose und schwerhörige Menschen
• Menschen mit körperlichen Beeinträchtigungen bei der motorischen Steuerung
• Geistig behinderte Menschen
• Menschen mit geringer Sprachkenntnis

Was Sie konkret tun können, um für diese Nutzerinnen und Nutzer Barrieren abzubauen, erfahren Sie in der Checkliste am Ende dieses Posts.

Barrierefreies Webdesign: Beispiele und Best Practices

Die vielfach ausgezeichnete Webpräsenz der britischen Regierungsorganisationen ist auch Vorreiter für barrierefreies Webdesign. Die Seiten setzen umfangreiche Maßnahmen für ein exzellentes Erlebnis unabhängig von körperlichen, geistigen und anderweitigen Voraussetzungen um. Zum Beispiel:

• selbsterklärende Namen der Navigationselemente
• ARIA-Attribute für Formular-Links
• Wechsel zwischen Balkendiagrammen und Tabellen mit klaren Zahlen

Ein vorbildliches Beispiel aus Deutschland liefert der Integrationsfachdienst Köln. Zu den aufwendigen Mitteln für umfassende Inklusion zählen unter anderem:

• dynamische Sprachausgabe
• Videos in Gebärdensprache
• Umschaltung von Kontrasten und Schriftgrößen
• eine vollwertige Version in leichter Sprache

Weitere, sehr detailliert analysierte Best Practice Beispiele finden Sie bei Inviqa.

Barrierefreie Website erstellen: Eine Checkliste

Checklisten, Prüfungstools und Overlays, die umfassende und zuverlässige Analysen versprechen, können nur einen kleinen Teil der vorhandenen Barrieren identifizieren. Sie sind allerdings nützlich, um einen abschließenden Check Ihrer Website durchzuführen. Barrierefreies Webdesign sollte bestenfalls progressive Verbesserungen einschließen und mit schrittweiser Optimierung und Reaktion auf Nutzerfeedback die Inklusion im Netz weiter vorantreiben.

Wenn diese Voraussetzungen erfüllt sind, bieten Grundsätze, wie sie Accessibility Consultant Jan Hellbusch formuliert, in Form einer Checkliste eine gute Orientierung. Mit ihrer Hilfe stellen Sie sicher, dass Sie möglichst keine Barrieren übersehen und hohe Konformität mit dem WCAG-Standard erreichen:

1. Bedienung

Die Bedienung von Webseiten muss geräteunabhängig ohne Maus oder Touchscreen nur mit einer Tastatur möglich sein. Dabei müssen die Standards für Tab-Navigation und Tastenkombinationen eingehalten und alle Bedienelemente klar benannt sein. Für Formulare sollten Sie die korrekte Zuordnung von Feldnamen und Eingabefeldern im Screenreader sicherstellen.

2. Struktur und Orientierung

Ein linear logisches Layout und klare, eindeutige Führung der Nutzerschaft schaffen Orientierung auch ohne visuelle Informationen. Die Linearisierbarkeit des Contents ist besonders wichtig für den Zugang mit Screenreadern. Tabellen und Frames können damit nur einzeln ausgelesen werden. So schließen einige Designlösungen die Nutzung für sehbehinderte Menschen vollkommen aus.

3. Text

Schriftgröße und Kontrast sind für die Lesbarkeit essenziell. Auszeichnungen sollten dort, wo sie für die Nutzung zwingend notwendig sind, nicht nur mit Farbe, sondern auch durch Symbole oder Sonderzeichen erfolgen. In PDFs oder in Bildern eingebetteter Text ist für viele Leser und Leserinnen nicht zugänglich. Alternativen in leichter Sprache schließen weitere Nutzergruppen ein.

4. Grafik

Barrierefreie Webseiten sind in Inhalt und Funktion auch ohne Grafik vollständig nutzbar. Für alle Grafiken und Bilder müssen vollwertige, sinnhaltige Alternativtexte vorliegen. Hintergrundgrafiken können die Nutzung mit Screenreadern beeinträchtigen. Bei besonders komplexen und außergewöhnlichen Designs bieten sich Alternativseiten in reinem Text an.

5. Farben und Kontraste

Alle Informationen sollen bei individualisiertem Farbschema und im Kontrastmodus erkennbar sein.

6. Audio und Multimedia

Für Multimediainhalte sollen aussagekräftige Alt-Texte vorhanden sein. Alternative Text-Versionen oder synchronisierte Untertitel im SMIL-Format machen den Content für Screenreader zugänglich.

7. Java und Java Script

Widgets und Script-Elemente müssen vollständig über Tastatursteuerung bedienbar sein. Auszeichnungen in Web-ARIA schaffen klaren Zugang für Screenreader. Eine Fallback-Lösung als Ersatz für nicht nutzbare Widgets kann weitere Hürden abbauen.

Fazit: Höhere Reichweite und Inklusion durch barrierefreies Webdesign

Inklusion im Web ist nicht nur eine menschliche Geste, sondern auch wirtschaftlich sinnvoll, weil eine größere Zielgruppe Ihre Angebote erreicht. Mit der Konformität zum WCAG-Standard können Sie einen großen Teil der Barrieren zuverlässig abbauen. Nutzen Sie dafür die Checkliste und verbessern Sie das Nutzererlebnis Ihrer Website stetig weiter.

Titelbild: scyther5 / iStock / Getty Images Plus