Barrierefreie Website – Ein Überblick

Viele Menschen stoßen im Internet auf Barrieren, ähnlich wie im Alltag auf der Straße. Schlecht organisierte Überschriften auf einer Website erschweren die Navigation per Screenreader für Blinde – genauso wie fehlende Leitstreifen und Aufmerksamkeitsfelder auf Gehwegen. Eine fehlende Tastatursteuerung ist wie eine Treppe ohne Rollstuhlrampe. Videos auf einer Website ohne Gebärdensprache oder Untertitel sind für gehörlose Menschen ebenso unverständlich wie eine Durchsage am Bahnhof.

All das adressiert eine barrierefreie Website: Sie macht das Internet für ALLE Menschen zugänglich. Darunter nicht nur Menschen mit einer Behinderung oder temporären Einschränkung. Auch für Legastheniker, Migranten oder Menschen, die eine unübersichtliche Website am liebsten sofort wieder schließen würden. Genau deswegen wird eine barrierefreie Website für viele Anbieter ab dem 28. Juni 2025 per Gesetz zur Pflicht. 

Als Agentur für barrierefreie Websites geben wir Ihnen hier einen Überblick über die Notwendigkeit einer barrierefreien Website, über die Pflichten und Fristen, die wichtigsten Kriterien sowie was Sie davon sofort testen und umsetzen können:

Warum eine barrierefreie Website notwendig ist:

Allein in Deutschland leben laut dem Statistischen Bundesamt Stand 2021 rund 7,8 Millionen Menschen mit einer Behinderung. Laut tagesschau.de haben etwa 17 Millionen Menschen in Deutschland Schwierigkeiten, komplexe Texte zu verstehen. Der Bevölkerungsanteil von Menschen über 60 Jahren wächst immer weiter. Die Argumente für eine barrierefreie Website sind damit ebenso vielseitig wie die Zielgruppe. 

Der Artikel 9 und 21 der UN-Behindertenkonvention spricht Menschen mit Behinderung das Recht auf einen gleichberechtigten Zugang zu Information und Kommunikation zu. Damit ist der ethische Gesichtspunkt einer barrierefreien Website wohl auch der wichtigste: Anbieter, die ihre Websiteinhalte barrierefrei gestalten, zeigen gesellschaftliche Verantwortung. Menschen, die von Barrieren im Internet betroffen sind, haben durch eine inklusive Website einen selbstbestimmten Zugang zu Informationen und Angeboten. 

Folglich geht mit einer barrierefreien Website auch eine größere Zielgruppe einher, die Sie mit Ihrem Webangebot erreichen. Denn wir shoppen alle gerne online, suchen nach Informationen, vernetzen uns in Communitys oder lassen uns im Internet inspirieren. 

Abgesehen davon können einige Aspekte einer barrierefreien Website die allgemeine User-Experience auf einer Website verbessern. Wie beispielsweise klare Kontraste, eine übersichtliche Navigation und eine einheitliche Struktur der Überschriften. 

Pflichten und Fristen für eine barrierefreie Webseite – Stichtag 2025

Websites öffentlicher Stellen des Bundes SIND bereits zu einer barrierefreien Website verpflichtet. Das wurde im Mai 2019 durch die Barrierefreien-Informationstechnik-Verordnung (BITV) 2.0 und dem Behindertengleichstellungsgesetz (BGG) beschlossen. Durch das  Barrierefreiheitsstärkungsgesetz (BFSG) WERDEN auch privatwirtschaftliche Unternehmen zur Umsetzung einer barrierefreien Website verpflichtet.

Seit Mitte 2019 schreibt der European Accessibility Act ein Mindestmaß an Barrierefreiheit auch für privatwirtschaftliche Anbieter von Webangeboten vor. Dies verpflichtete die europäischen Mitgliedstaaten, ein Gesetz zur Durchsetzung der Mindestanforderungen zu verabschieden. In Deutschland geschieht genau dies mit dem Inkrafttreten des BFSG.

Das bedeutet, dass neben staatlichen Einrichtungen auch Unternehmen in den folgenden Branchen in Deutschland verpflichtet sind, barrierefreie Websites anzubieten:

• Bankendienstleistungen
• Telefon und Messengerdienste
• Personenbeförderungsdienste
• Anbieter von Mobilapps für Dienstleistungen im überregionalen Personenverkehr
• E-Books
• Elektronischer Geschäftsverkehr (E-Commerce)

Die Regulierung der BITV 2.0 und nun des BFSG basiert auf den Richtlinien für barrierefreie Webinhalte (WCAG 2.1), welche von dem World Wide Web Consortium (W3C) ausgearbeitet wurden. Das WCAG 2.1 unterscheidet zwischen drei Konformitätsstufen: A, AA und AAA. Jede der Konformitätsstufen bringt entsprechend andere Anforderungen mit sich. Das BFSG verpflichtet zur Konformitätsstufe AA (Kriterien der Konformitätsstufe A ebenfalls inbegriffen).

Falls eine Website der betroffenen Branchen dennoch bis zum 28. Juni 2025 den Kriterien für einen barrierefreien Zugang nicht gerecht wird, drohen hohe Bußgelder von bis zu 100.000 Euro.

Und was bedeutet das alles für mich?

Sollten Sie von der Pflicht zu einer barrierefreien Website durch das BFSG betroffen sein, gibt es erste Schritte, die Sie kurzfristig umsetzen können. 

Zunächst sollten Sie Besuchern Ihrer Website ermöglichen, Barrieren auf Ihrer Website zu melden. Beispielsweise stellt die Bundesregierung auf Ihrer Internetseite hierfür gleich mehrere Möglichkeiten zur Verfügung: über ein Formular, telefonisch oder via ein Feedback in Deutscher Gebärdensprache.

Genauso kurzfristig umsetzbar, ist der Upload einer “Erklärung zur Barrierefreiheit” auf Ihrer Website. Darin können Sie auf nicht barrierefreie Passagen Ihrer Website hinweisen und erörtern, welche Schritte Sie zur Einhaltung der Richtlinien unternehmen werden.

Auch hier gibt es einige Regelungen zu beachten. Beispielsweise muss die Erklärung zur Barrierefreiheit von jeder Unterseite leicht auffindbar sein und muss in einem barrierefreien Format veröffentlicht werden. Einen kompletten Leitfaden hierzu finden Sie auf der Website der Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik.

Die wichtigsten Kriterien für eine barrierefreie Website im Überblick – Konformitätsstufe AA

Hier finden Sie alle Kriterien, die eine barrierefreie Website gemäß dem BFSG und damit der Konformitätsstufe AA plus A der WCAG 2.1 erfüllen muss. Zusammengefasst muss eine barrierefreie Website nach 4 Prinzipien aufgebaut sein:

• Wahrnehmbar
• Bedienbar
• Verständlich
• Robust

Wahrnehmbar

Nach dem Prinzip der Wahrnehmbarkeit muss eine barrierefreie Website Funktionen und Informationen so präsentieren, dass sie für alle Nutzer erkennbar sind. Visuelle Elemente müssen hörbar gemacht werden, hörbare Elemente sichtbar, Informationen unabhängig von Farben vermittelt und bei Bedarf taktil erfassbar sein.

• Alternativen für Nicht-Text-Inhalte: Alternativtexte für Bilder müssen den abgebildeten Inhalt wiedergeben. Alternativen für Video- und Audioelemente müssen ebenfalls denselben Inhalt bieten. Bei audiovisuellen Medien helfen Untertitel, Audiodeskriptionen oder Videos in Gebärdensprache, um diese für alle Menschen zugänglich zu machen.
• Keine Texte als Bilder: Text sollte nicht als Bild verwendet werden, außer er ist ausschließlich dekorativ oder essenziell für den Inhalt.
• Informationen und Zusammenhänge: Informationen, Struktur und Zusammenhänge müssen durch assistive Technologien eindeutig erfassbar sein oder in Textform verfügbar sein.
• Sinnvolle Reihenfolge: Inhalte müssen in einer sinnvollen Reihenfolge präsentiert werden (z. B. von links nach rechts oder von oben nach unten).
• Sensorische Merkmale / Anweisungen: Anweisungen dürfen sich nicht ausschließlich auf sensorische Merkmale stützen (z. B. „drücken Sie den roten Knopf“).
• Kontrastverhältnisse und Farbverläufe: Der Kontrast zwischen Vorder- und Hintergrundfarben muss ausreichen (4,5:1 für normalen Text, 3:1 für große Schrift). Bei grafischen Elementen sollte ein Kontrastverhältnis von mindestens 3:1 eingehalten werden. 
• Audio-Steuerung: Kontrolle über das Pausieren von automatisch abgespielte Audiodateien.
• Anzeigenausrichtung der Inhalte: Der Inhalt soll nicht auf eine bestimmte Anzeigeausrichtung, wie Hoch- oder Querformat, beschränkt sein. Es sei denn, eine bestimmte Anzeigeausrichtung ist unbedingt erforderlich.
• Eindeutiger Eingabezweck: Der Zweck eines jeden Eingabefeldes muss durch assistive Technologien erkannt werden können.
• Skalierbarkeit: Schriften, Bereiche und Abstände sollten relativ angegeben werden (em oder %), um eine 200 % Vergrößerung zu ermöglichen. Schriften sollten ohne unterstützende Technologien vergrößert werden können. Inhalte sollen ohne horizontalen Scrollen bei einem Zoom von bis zu 400 % lesbar sein. Bei Anpassung der Textabstände durch den User darf es zu keinem Verlust von Inhalt oder Funktionen kommen.
• Hover- und Fokuseffekte: Zusätzliche Inhalte, die durch das Setzen des Mauszeigers oder durch den Tastaturfokus sichtbar werden, müssen sowohl über Maus und Tastatur zugänglich sein als auch manuell ausgeblendet werden können.
  

Bedienbar

Das Prinzip der Bedienbarkeit gewährleistet, dass Nutzer unabhängig von ihren Fähigkeiten alle Funktionen einer Website barrierefrei nutzen können. Wichtige Voraussetzungen dafür sind: die Möglichkeit zur Tastaturbedienung, ausreichend Zeit für Interaktionen, Verzicht auf epilepsieauslösende Effekte, eine klare Navigationsstruktur und Alternativen zu Mausfunktionen und Zeigergesten.

• Tastaturbedienung: Alle Funktionen der Website müssen über die Tastatur bedienbar sein. Darunter auch die Navigation. Der Tastaturfokus muss dabei deutlich sichtbar sein. Hierbei dürfen keine “Tastaturfallen” entstehen, aus welchen der Nutzer nicht mehr heraus navigieren kann. Darüber hinaus müssen Tastenkombinationen für Funktionen auf der Website ausschaltbar sein. 
• Regulierung von zeitbegrenzten Inhalten: Timer bei zeitlich begrenzter Content müssen vom Benutzer abgestellt oder verlängert werden können. 
• Regulierung von bewegten Inhalte: Sich bewegende Inhalte müssen pausiert, fortgesetzt oder ausgeblendet werden können. Animierte Inhalte dürfen nicht mehr als dreimal pro Sekunde blinken.
• Regulierung von sich wiederholten Inhalten: Sich wiederholende Inhalte müssen übersprungen oder ausgeblendet werden können. 
• Eindeutige Headlines und Seitentitel: Sowohl die Headlines als auch die Seitentitel müssen eindeutig das Thema und den Inhalt betiteln. 
• Bewahren des Fokus: Die Reihenfolge des Fokus bei der Navigation mit der Tastatur über die Website muss immer gleich bleiben. Der Fokus darf also nicht zwischen rechts nach links und von oben nach unten wechseln.
• Verlinkungen eindeutig kennzeichnen: Bei Verlinkungen auf der Website muss deren Kontext und Ziel hervorgehoben werden.
• Mehrere Navigationsmöglichkeiten: Unterseiten müssen über mehrere Möglichkeiten gefunden werden können. Bspw. sowohl in der Navigation als auch über eine Suchfunktion.
• Sichtbarkeit von Mausfunktionen: Pop-up-Fenster oder zusätzlich verfügbare Informationen müssen durch einen Hinweis sichtbar sein. Zudem muss eine Alternative zur Maus bestehen, um diese Funktionen auszulösen. 

Verständlich

Inhalte und Bedienelemente auf der Website müssen verständlich sein. In erster Linie ist es wichtig, Informationen so einfach wie möglich darzustellen. Beispielsweise durch barrierefreie Sprache (Link coming soon) und Definitionen zu Fachbegriffen. Zusätzlich sieht das Prinzip der Verständlichkeit eine übersichtliche und vorhersehbare Benutzeroberfläche vor sowie eine konsistente Navigation. 

• Sprache: Die Hauptsprache der Seite muss erkennbar sein. Auch die Sprache von einzelnen Textteilen muss angegeben werden, wenn sie sich von der Hauptsprache unterscheidet.
• Keine automatische Änderung des Kontexts: Änderungen des Kontexts dürfen nicht ohne eindeutige Benutzereingabe erfolgen. Bspw. dürfen sich keine neuen Fenster bei der Navigation per Tatstatur oder Maus automatisch öffnen, die den Kontext der Inhalte verändern. 
• Fehleridentifikation und Benachrichtigung: Bei Eingabefehlern muss der User in Textform informiert werden und wenn vorhanden Lösungsmöglichkeiten mitgeteilt werden. Bei der Anpassung von rechtlichen, finanziellen oder persönlichen Daten müssen Fehlervermeidungsmechanismen existieren. 
• Labels bei Benutzereingaben: Labels oder Anweisungen müssen bereitgestellt werden, wenn Benutzereingaben erforderlich sind.
• Konsistente Navigation: Navigationsmechanismen müssen konsistent auf allen Seiten verwendet werden.
• Konsistente Identifikation: Komponenten, welche dieselbe Funktion haben, müssen konsistent identifiziert werden.

Robust

Durch eine robuste Programmierung soll gewährleistet werden, dass die Website sowohl mit assistiven Technologien wie Screenreader oder Braille-Drucker kompatibel sind und alle Informationen verarbeiten können. Das Prinzip der Robustheit bedeutet aber auch, dass Webseiten auf den genutzten Benutzeragenten (bspw. Webbrowser) problemlos nutzbar ist.

• Parsing von Inhalten / Syntaxanalyse: Benutzeragenten sollen Inhalte korrekt interpretieren und wiedergeben können. In der Regel wird dies durch Start- und End-Tags im HTML oder XML-Code einer Website gewährleistet.
• Anpassung von “Name, Role, Value”: Alle Elemente des Interfaces müssen bestimmt und geändert werden können. So können bspw. assistive Technologien Informationen über den Status von Bedienelementen der Benutzeroberflächen sammeln und Elemente wiedergeben oder aktivieren / bedienen.
• Statusmeldungen: Durch die Verwendung von Markups soll es assistive Technologien ermöglicht werden, den User zu informieren, wenn sich etwas auf der Website geändert hat, ohne dass ein entsprechender Input / Fokus des Users erfolgte. 

Interaktive Checklise

Das sind eine Menge Kriterien, finden Sie nicht auch? Eine kompakte Übersicht über alle WCAG A- und AA-Kriterien finden Sie in unserer interaktiven Checkliste zur Barrierefreiheit.

So können Sie selbst Ihre Website auf Barrierefreiheit testen – Machen Sie den accesebility check

Um Ihre Website auf Barrieren zu testen, gibt es mehrere Möglichkeiten. Angefangen bei manuellen Tests, die Sie ganz einfach selbst durchführen können oder mithilfe von Web Accessibility Evaluation Tools. 

Manuelle Tests:

Automatisierte Tools:

WAVE

Das WAVE Web Accessibility Evaluation Tool bietet umfassende Funktionen zur Überprüfung der Barrierefreiheit von Webseiten:

• Identifikation und Visualisierung von Fehlern: Findet und markiert Barrierefreiheitsprobleme direkt auf der Website.
• Erklärungen und Vorschläge: Bietet detaillierte Erklärungen und Lösungsvorschläge für identifizierte Probleme.
• Berichte: Generiert Berichte über die Barrierefreiheit der Webseite.
• Kompatibilität: Unterstützt die WCAG (Web Content Accessibility Guidelines).

Das WAVE Web Accessibility Evaluation Tool wurde von WebAIM (Web Accessibility In Mind) entwickelt. WebAIM ist eine Organisation, die sich auf die Verbesserung der Barrierefreiheit im Web konzentriert und Ressourcen sowie Schulungen zur Unterstützung von Entwicklern und Designern bereitstellt, um zugängliche Webinhalte zu erstellen. Die Tools von Wave sind kostenlos nutzbar. 

AXE

AXE (Accessibility Engine) ist ein Open-Source-Tool, das speziell für die Barrierefreiheitsprüfung von Webseiten entwickelt wurde. Es bietet folgende Funktionen:

• Automatisierte Tests: Überprüft Webseiten auf Barrierefreiheitsprobleme gemäß den WCAG-Richtlinien.
• Integration: Lässt sich in Entwicklungsumgebungen und CI/CD-Pipelines integrieren.
• Browser-Erweiterungen: Verfügbar als Add-ons für Chrome und Firefox, ermöglicht direkte Tests im Browser.
• Erweiterbarkeit: Anpassbar und erweiterbar durch Entwickler.
  

AXE (Accessibility Engine) wurde von Deque Systems entwickelt. AXE ist erweiterbar und anpassbar, sodass Entwickler Barrierefreiheitsprobleme frühzeitig erkennen können. Die AXE Browser-Erweiterungen für Chrome und Firefox sind kostenlos. Deque Systems bietet auch erweiterte kostenpflichtige Versionen und zusätzliche Dienstleistungen an, aber die grundlegenden Funktionen der Browser-Erweiterungen sind frei verfügbar.

Lighthouse

Der Lighthouse Accessibility Check ist ein Teil des Lighthouse Open-Source-Tool von Google, das speziell die Barrierefreiheit einer Website überprüfen kann. Es testet verschiedene Kriterien, basierend auf den WCAG:

• Textalternativen: Überprüfung, ob alle nicht-textuellen Inhalte mit Alt-Texten versehen sind.
• Navigierbarkeit: Sicherstellung, dass die Seite vollständig mit der Tastatur bedienbar ist.
• Farben und Kontraste: Prüfung des Kontrastverhältnisses zwischen Text und Hintergrund.
• Aria-Attribute: Kontrolle der Verwendung von ARIA-Rollen und -Eigenschaften zur Unterstützung von assistiven Technologien.
• Beschriftungen und Anweisungen: Überprüfung von Formularfeldern und anderen interaktiven Elementen auf ordnungsgemäße Beschriftungen und Anweisungen.

Der Lighthouse Accessibility Check ist kostenlos verfügbar. Sie können ihn als Teil des Google Lighthouse-Tools nutzen, das in die Chrome Developer Tools integriert ist.

Best Practice: Zwei Positivbeispiele für eine barrierefreie Website

Genug mit der Theorie. Damit Sie eine Vorstellung davon bekommen, wie eine barrierefreie Website überhaupt aussieht, haben wir hier zwei Positivbeispiele für Sie: 

Deutesche Nationalbibliothek

Ein schönes Beispiel, wie eine barrierefreie Website des Bundes aussehen kann, ist die Website der Deutschen Nationalbibliothek. Als öffentliche Einrichtung des Bundes wurden hier gemäß dem BITV 2.0 die Richtlinien des WCAG 2.1 elegant umgesetzt.

Zusammengefasst bedeutet das: Die Website ist über mehrere Wege erreichbar, korrekt benannt und barrierefrei gegliedert. Bilder und grafische Elemente haben Alternativtexte, und Audio- und Video-Dateien bieten alternative Zugangsformen. Abkürzungen werden aufgelöst vorgelesen, und die Website ist auf 200 % vergrößerbar sowie vollständig tastaturbedienbar. Farben sind nicht allein inhaltstragend, Kontrastvorgaben werden eingehalten, und die Seite ist ohne Ton nutzbar. Zudem erhöhen zusätzliche Angebote in Leichter Sprache und Gebärdensprache die Barrierefreiheit.

Eine detaillierte Übersicht aller Maßnahmen finden Sie in der Erklärung zur Barrierefreiheit der Deutschen Nationalbibliothek.

Samsung

Wie eine barrierefreie Website im großen Stil aussieht, zeigt Samsung. Auf der Website wurden nach eigenen Angaben barrierefreie Funktionen nach Anforderungen der WCAG umgesetzt.

Beispielsweise ist der Slider auf der Startseite nicht nur pausierbar, die Animation der Inhalte lässt sich auch komplett abstellen, ohne den Kontext darin zu verlieren. Darüber hinaus sind auf der Website anpassbare Inhalte, Unterstützung für Screenreader, Tastatur-Navigation und Textalternativen für Bilder umgesetzt. Hier geht es zur Erklärung der Barrierefreiheit von Samsung.

Kostenfaktor Barrierefreiheit – Was kostet eine barrierefreie Website?

Was Sie vermutlich überall lesen werden, werden Sie leider auch hier lesen: Es kommt ganz darauf an. Trotzdem wollen wir versuchen, Ihre Frage etwas konkreter zu beantworten.

Der zentrale Punkt bei der Klärung der Kosten ist der Umfang. Entscheidente Faktoren für den Umfang eines barrierefreien Website-Projekts sind dabei:

• Die eigene Zielsetzung – Wird zunächst eine Teillösung angestrebt oder wird die komplette Website von Grund auf überarbeitet?
• Wie relevant die Umsetzung für Sie ist – Sind Sie von dem BFSG / der BITV betroffen? Die höchste Stufe, AAA, erfordert deutlich mehr Aufwand in der Umsetzung als die niedrigste Stufe, A.

Entsprechend kommen auf Sie folgende Kostenfaktoren auf Sie zu:

• Konzeption: Anhand des Umfangs muss ein maßgeschneidertes Konzept erstellt werden, welches Ihren persönlichen Anforderungen entspricht und wenn nötig, alle gesetzlichen Richtlinien an eine barrierefreie Website berücksichtigt.
• Erstellen von Content: Die Texte für die Website müssen übernommen oder neu erstellt werden. Das gilt auch für andere Medien wie Bilder, Videos oder Podcasts.
• Sprachenvielfalt: Sind neben der Muttersprache noch weiterer Sprachen gewünscht, müssen diese entweder übersetzt oder übernommen werden.
• Programmierung: Der Aufwand variiert stark, je nach Menge des Contents, gesetzlichen Anforderungen sowie persönliche Präferenzen und Funktionen der Website.

Zusatzkosten können beispielsweise bei Texten in Leichter Sprache oder bei der Produktion von Gebärdensprachvideos entstehen – zumal hier gegebenenfalls mehrere Sprachen (Deutsch, Englisch, Französisch, …) mit einberechnet werden müssen. Und richtig gelesen, auch bei der Gebärdensprache gibt es international unterschiedliche “Sprachen”.

Eine Übersicht, welche Faktoren bei der Umsetzung einer barrierefreien Website alles anfallen, finden Sie hier. (Link coming soon).

Fazit

Eine barrierefreie Website hat zusammengefasst zwei entscheidende Vorteile: Sie erweitert die Zielgruppe für Ihr Unternehmen und macht das Internet gleichzeitig für Millionen von Menschen ein Stück zugänglicher. 

Etwas komplizierter wird es in Anbetracht der rechtlichen Lage: Zur Umsetzung einer barrierefreien Website sind öffentliche Einrichtungen des Bundes bereits durch das BITV 2.0 und durch das BGG seit 2019 verpflichtet. Bestimmte Dienstleister aus dem privatwirtschaftlichen Sektor werden durch das BFSG ab dem 28. Juni 2025 dazu verpflichtet. Doch das bedeutet nicht, dass Unternehmen den gleichen Verpflichtungen wie Einrichtungen des Bundes unterliegen. Wir empfehlen also, sich genauestens über die Gesetzte und Pflichten zu informieren (Link coming soon) und wenn nötig, das BFSG aufmerksam zu lesen.

Letztlich führt für betroffene Unternehmen kein Weg daran vorbei, eine barrierefreie Website umzusetzen – und das besser früher als später angesichts der kommenden Fristen. Als Agentur für barrierefreie Websites beraten wir Sie gerne und unterstützen Sie bei der Umsetzung.

Kontakt