Magazin Barrierefreie Websites: die wichtigsten Faktoren

Eine barrierefreie Website ist ein Web-Angebot, das ohne zusätzliche Installationen oder (technische) Einschränkungen für jeden zugänglich ist. Entgegen der weit verbreiteten Annahme bezieht sich dies also nicht nur auf Menschen mit physischen und/oder psychischen Beeinträchtigungen, sondern generell auf jede:n Benutzer:in Ihrer Website.

Die Besucher:innen Ihrer Website sollen unabhängig von persönlichen und technischen Einschränkungen (Barrieren) alle Inhalte ohne Probleme lesen und auch die Interaktionsmöglichkeiten nutzen können. Die Herausforderung Ihrerseits besteht allerdings darin, allen Anforderungen der Barrierefreiheit und gleichzeitig auch den Bedürfnissen der Benutzer:innen gerecht zu werden. Ihre barrierefreie Website sollte dementsprechend sowohl für Sehende optisch ansprechend als auch für Menschen, die auf technische Hilfsmittel angewiesen sind, erfassbar sein.

Zu Barrieren zählen sowohl technische Einschränkungen als auch körperliche, geistige sowie seelische Einschränkungen, die in §3 des Deutschen Behindertengleichstellungsgesetzes (BGG) Berücksichtigung finden. Neben diesen Barrieren gibt es zudem noch zahlreiche Barrieren, die temporär bedingt sind. Hier finden Sie eine Auflistung möglicher Barrieren, die es bei der Gestaltung Ihrer Website zu beachten gibt.

• Technische Einschränkungen: Inhalte einer Website sind nicht für die Ausgabe durch assistive Hilfsmittel geeignet (u. a. durch fehlende Untertitel, Alternativtexte etc.); keine oder nicht-funktionstüchtige Lautsprecher; Verwendung älterer Browser oder Text-Browser
• Einschränkungen des Sehens: leichte bis starke Sehschwäche – kontrastarme Inhalte sowie Formen sind kaum wahrnehmbar/erkennbar; Blindheit; Farbsehschwächen (z. B. Rot-Grün-Schwäche); temporäre Beeinträchtigung des Sehens (entzündetes oder verletztes Auge etc.)
• Einschränkungen des Hörens: Taubheit; temporäre Beeinträchtigung des Gehörs
• Motorische Beeinträchtigungen: gebrochene oder fehlende Körperteile etc.; diverse körperliche Einschränkungen

Um diese Barrieren zu erkennen und abzubauen, existieren einige Empfehlungen und Richtlinien, an die Sie sich halten können.

Die Web Content Accessibility Guidelines (WCAG) sind die weltweit geltenden Standards des World Wide Web Consortium (W3C). Die WCAG sind Richtlinien für alle auf Entwicklerseite beteiligten Interessensgruppen (Redakteure, Web-Developer etc.), die Produkte entsprechend der Barrierefreiheit erstellen. Sie werden von der Web Accessibility Initiative (WAI), einer speziellen Arbeitsgruppe des W3C, aufgestellt.

Die Richtlinien der WAI stellen keine rechtliche Verpflichtung dar. Sie sollen lediglich als Vorlage für entsprechende nationale Bestimmungen dienen, wie die der Barrierefreiheit Informationstechnik-Verordnung (BITV) in Deutschland. 

Seit 2002 ist in § 3 des Deutschen Behindertengleichstellungsgesetzes festgelegt, dass Web-Angebote barrierefrei zu gestalten sind. Die BITV – seit 2011 BITV 2.0 – ist als Ergänzung des Gesetzes zu verstehen und basiert auf den Richtlinien des W3C. Sie soll bewirken, dass Informationstechniken für Menschen mit Beeinträchtigungen jeglicher Art zugänglich und bedienbar sind.

Die Verordnung gilt im Speziellen für sämtliche öffentlich zugänglichen Web-Angebote des Bundes. Private und kommerzielle Seiten gehören nicht dazu, können sich aber an den WCAG des W3C orientieren.

2016 trat die EU-Richtline 2016/2102 für einen barrierefreien Zugang zu Websites und mobilen Anwendungen öffentlicher Stellen in Kraft. Bis 2018 hatten alle Mitgliedsstaaten der Europäischen Union Zeit, die Richtlinie umzusetzen. Neben der Anpassung des Behindertengleichstellungsgesetzes wurde auch die BITV 2.0 überarbeitet. Seither müssen alle Webinhalte, Office-Dokumente und PDFs barrierefrei zugänglich und bedienbar sein. Nicht-webbasierte mobile Applikationen müssen seit Ende Juni 2021 Barrierefreiheit gewährleisten. Ab 2025 soll die EN 2019/882 durch das Barrierefreiheitsbestärkungsgesetz (BSFSG) einsetzen. Ziel dieser EU-Richtlinie ist es, einen einheitlichen Standard in puncto Zugänglichkeit von Dienstleistungen und Produkten im Web zu ermöglichen.

Unter der Beachtung der genannten Richtlinien können Sie möglichst vielen Menschen den Zugang zu Ihrem Web-Angebot ermöglichen und somit die Menge potenzieller Besucher:innen vergrößern. Wenn wir Websites erstellen, prüfen wir die Barrierefreiheit der Seiten ebenfalls mit Blick auf diese Richtlinien. 

Screenreader gehören zu den speziellen Ausgabegeräten, die vor allem blinden Menschen die Navigation durch eine Website ermöglichen. Sie lesen Nutzer:innen sämtliche Inhalte und Elemente (Grafiken, Text etc.) vor. Das Ganze wird wahlweise über Lautsprecher oder Kopfhörer wiedergegeben.

Zudem können Nutzer:innen mit einem Screenreader Kontaktformulare ausfüllen oder Links erkennen. Diesen folgen sie dann entweder auf eine andere Seite oder überspringen sie zum jeweils nächsten Link. All das funktioniert allerdings nur dann problemlos, wenn Ihre Seite auch so programmiert wurde, dass der Screenreader die Seitenstruktur Ihrer Website erkennt. Links und Formulare müssen dafür als solche gekennzeichnet sein. 

Neben dem Screenreader sind aber vor allem Braille-Zeilen relevant für blinde Menschen. Sie bestehen aus einer Lochmasken-Schiene, durch die einzelne Stifte beim Auslesen des Textes hochgedrückt und als Braille-Schrift wiedergegeben werden. Hier wird der Inhalt also nicht auf akustischer, sondern auf taktiler Ebene ausgegeben. 

Es gibt unzählige Ausprägungen von speziellen Tatstaturen: Von außergewöhnlich großen zu sehr kleinen Tasten sowie besonderen Tastenbelegungen für die Bedienung mit nur einer Hand ist alles dabei. Die Tastatur kann manuell oder über andere Körperteile (Ellenbogen, Kopf etc.) bedient werden.

Menschen mit eingeschränkter Motorik nutzen in der Regel Tastaturen, die auf ihre Bedürfnisse angepasst sind. So kommen zum Beispiel Touchpads, Minitastaturen oder Joysticks zum Einsatz. Auch die Steuerung über einen Kopf- sowie Mundstab ist möglich.

Als Alternative zur Tastatursteuerung nutzen viele Menschen, deren Sehfähigkeit eingeschränkt ist, Softwarelösungen, die eine Bedienung des Computers über die Sprache ermöglichen. Eine sogenannte Spracherkennungssoftware kann aber auch bei anderen körperlichen Einschränkungen zielführend sein.

Die Spracherkennungssoftware wandelt gesprochene Worte in Text um, überträgt sie und gibt sie aus. Grundsätzlich wird zwischen einer sprecherabhängigen und sprecherunabhängigen Spracherkennung unterschieden. Bei der sprecherabhängigen Spracherkennung muss die Software, anders als bei der sprecherunabhängigen Erkennung, auf die Stimme und Sprechweise der sprechenden Person abgestimmt werden. Dies erfordert ein gezieltes Sprachtraining. 

Eine Vergrößerungssoftware lohnt sich besonders für Menschen mit einer temporären oder dauerhaften Sehschwäche und ermöglicht eine pixelweise Vergrößerung des Computerbildes. Dabei spielt die Software immer einen bestimmten vergrößerten Bildschirmausschnitt aus, der durch den Nutzer über spezielle Farb- und Kontrasteinstellungen optisch verändert werden kann. 

Die Navigation durch eine barrierefreie Website wird oft über spezielle HTML- oder JavaScript- Einstellungen geregelt. Eine bestimmte Reihenfolge der Links oder der Steuerelemente wird dafür über tabindex ermöglicht. Neben tabindex gibt es noch den Accessible Rich Internet Snippet (ARIA), der vor allem für Screenreader von großer Bedeutung ist.

Zur Navigation durch eine Seite werden normalerweise mittels der Tabulatorentaste Links und Steuerelemente nacheinander in einer bestimmten Reihenfolge im Quelltext angesprungen. Die Tab-Reihenfolge muss in der Regel also nicht verändert werden. Mit dem HTML-Attribut tabindex ist das möglich – empfehlenswert ist es allerdings nicht.

Auch wenn das tabindex-Attribut noch im HTML als valide gilt, betrachtet Google es als einen ungünstigen Lösungsansatz. Die Umsetzung ist zumeist fehlerhaft und zieht Probleme für Nutzer:innen nach sich.

Der WAI-ARIA ist ein Webstandard des W3C und ermöglicht Webentwickler:innen, Webinhalte und Applikationen für Menschen mit Behinderungen und anderweitigen Einschränkungen zugänglich zu machen. So lassen sich mittels ARIA-Element Navigations-Landmarken sowie JavaScript-Widgets hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten. Es ist bereits in den meisten Browsern und Screenreadern implementiert.

ARIA kommt vor allem dann zum Einsatz, wenn das HTML nicht die nötige Semantik für die Accessibility aufbringt. Achten Sie bei der Verwendung darauf, dass die Semantik des HTML nicht umdefiniert wird. Es ist nur als Ergänzungstechnik zu verstehen und auch nur dann einzusetzen, wenn Vorheriges der Fall ist.

Folgende Attribute können eingesetzt werden:

Wenn Sie Ihre Website auf Barrierefreiheit beziehungsweise Accessibility (=Zugänglichkeit) überprüfen wollen, können Sie dies mit folgenden, teils kostenfreien Tools selbst in die Hand nehmen.

Lighthouse ist in die Chrome Developer Tools integriert und ermöglicht viele verschiedene Tests auf Webseiten, so auch der Test auf Accessibility. Seit 2018 ist Lighthouse ein fester Bestandteil des Google Chrome Browsers und kann per Klick auf die Taste F12 und dann auf „weitere Tools“ im Menü geöffnet werden.

Befinden Sie sich auf der Seite, die Sie testen wollen, wählen Sie den Reiter „Lighthouse“ aus. Daraufhin öffnet sich dann folgendes Fenster.

Nun klicken Sie die gewünschten Test-Optionen, hier „Accessibility", an. Dazu können Sie auswählen, für welches Endgerät (Desktop oder Mobile) Sie den Test durchführen möchten. Mit dem Klick auf „Generate report“ beginnt der Test und Sie können gespannt auf Ihre Auswertung warten.

Kleiner Tipp: Ist die Punktzahl oben rechts unter 80, sollten Sie Ihre Seite optimieren. Was dabei den größten Optimierungsbedarf darstellt, können Sie in der Auflistung Ihres Ergebnisses erkennen. 

Das Testverfahren zur BITV wurde vom Bundesministerium für Arbeit und Soziales innerhalb des Projektes „Barrierefrei informieren und kommunizieren (BIK)“ entwickelt. Ihm liegen die Anforderungen der Barrierefreie-Informationstechnik-Verordnung (BITV) zugrunde. Die BITV wiederum basiert auf den Vorgaben der Web Content Accessibility Guidelines (WCAG) der Web Accessibility Initiative (WAI).

Der BITV-Test beinhaltet 60 Prüfschritte. Zu jedem Prüfschritt gibt es ausführliche Erläuterungen, die genau besagen, was geprüft wird, warum das wichtig ist und wie in der Prüfung vorzugehen ist. Das Testverfahren ist vollständig offengelegt.

Entwicklungsbegleitende und abschließende BITV-Tests können Sie bei erfahrenen Expert:innen in den BITV-Test Prüfstellen in Auftrag geben. Sie können aber auch eine Selbstbewertung nach BITV vornehmen. Diese dient Ihnen als Einschätzung zum Stand der Zugänglichkeit Ihrer Website.

Siteimprove ist ein kommerzielles Online-Tool, das automatisierte Testverfahren anbietet, die Ihre Website gemäß der WCAG überprüfen. Unter Angabe Ihrer URL und Ihrer Geschäfts-E-Mail erhalten Sie eine Auswertung Ihrer Website sowie Optimierungsvorschläge bezüglich der Accessibility per Mail.

Die WAVE-Toolbar wurde von WebAIM.org entwickelt. Mittels dieser Überprüfung lassen sich wichtige Schlüsse über Ihre Website bezüglich der Zugänglichkeit ziehen. Um die Prüfung zu starten, rufen Sie das Online-Tool auf und geben die URL ein. Die Ergebnisse werden dann mit Symbolen direkt auf der geprüften Seite angezeigt. 

Wenn Sie möchten, können Sie sich das Tool auch als Extension für Ihre Google Chrome Browser runterladen.

Der Color-Contrast-Analyser prüft Ihre Website auf Farbkontrastprobleme gemäß den WCAG-Anforderungen und einem Algorithmus zur Berechnung des Kontrastverhältnisses des W3C. Dem Ergebnis können Sie dann entnehmen, ob das Verhältnis zwischen Vorder- und Hintergrundfarbe stimmt und ob alle Konformitätsstufen berücksichtigt wurden.  

Da heutzutage immer mehr Informationen online zugänglich sind, wird auch die Barrierefreiheit von Websites zunehmend wichtiger. Damit ist das Thema auch für eine Vielzahl von Unternehmen relevant, die auf verschiedene Zielgruppen eingehen, die Bedienbarkeit erhöhen und das bestmögliche Nutzererlebnis bieten möchten.

Allerdings sind barrierefreie Websites auf keinen Fall zu unterschätzen. Sie erfordern zunächst einmal die Kenntnis über verschiedene Standards, die auf Ihrer barrierefreien Website Berücksichtigung finden sollten. Die strikte Trennung von Inhalt, Struktur und Design sind dafür sehr hilfreich und eine wesentliche Grundlage für die Zugänglichkeit eines Webauftritts.

Der Lighthouse-Audit ist die optimale Möglichkeit, um sich selbst einen ersten Eindruck zu verschaffen, an welcher Stelle Optimierungsbedarf herrscht. Der BITV-Test lohnt sich, wenn Sie aufgrund von Vorgaben oder Zielgruppen eine hochgradig barrierefreie Website benötigen. Auch wenn Sie als öffentliche Stelle des Bundes zu einer barrierefreien Website verpflichtet sind, sollte dieser Test durchgeführt werden.