Barrierefreies Webdesign - Darauf solltest du achten

Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) müssen Webseiten ab dem 28. Juni 2025 barrierefrei gestaltet sein. 

Was ist das BFSG?

Am 23. März 2021 hat das Bundeskabinett das Barrierefreiheitsstärkungsgesetz (BFSG) verabschiedet und setzt so den European Accessibility Act (EAA)¹ die EU-Richtlinie für Barrierefreiheit bei Produkten und Dienstleistungen, in Deutschland um. Neben vielen Bereichen, wie Bankdienstleistungen, Personenbeförderungsdiensten, Geldautomaten oder Computern, sind auch Webseiten von dem Gesetz betroffen.

Das Barrierefreiheitsstärkungsgesetz (BFSG) soll es Personen mit Beeinträchtigungen ermöglichen, im Internet unterwegs zu sein und ohne Probleme eine Webseite bedienen zu können.

Fast jeder Achte in Deutschland hat eine Behinderung. Dabei handelt es sich um Seh- und Hörschwächen, Gehbehinderung oder auch geistige und psychische Einschränkungen. Zudem lebten laut des Statistischem Bundesamts 2021 9,4% schwerbehinderte Menschen in Deutschland².

Welche Beeinträchtigungen gibt es?

Einschränkung des Sehens

• Sehschwäche - kontrastarme Inhalte sind schwierig zu erkennen
• Blindheit
• Farbschwächen, wie Deuteranopie, Protanopie oder Tritanopie

Folgende Grafik zeigt zum Beispiel, wie Menschen ohne Farbschwäche Farben sehen und darunter kann man sehr gut erkennen, welche Probleme bei Leuten mit einer Farbschwäche auftreten können:

Einschränkungen des Hörens

• Taubheit
• teilweise eingeschränkter Gehörsinn

Technische Einschränkungen

• Inhalte auf Website sind nicht für alle Endgeräte optimiert
• Inhalte lassen sich nicht in älteren Browsern anzeigen

Motorische Beeinträchtigungen

• gebrochene oder fehlende Körperteile
• körperliche Einschränkungen

Was bedeutet das für Webseiten?

In Zukunft müssen Webseiten für Personen mit Einschränkungen wahrnehmbar, bedienbar, verständlich und robust sein.

Wahrnehmbar:

• Inhalte und Interface der Webseite muss für jede Person wahrnehmbar gestaltet sein
• Texte müssen ein über eine Sprachausgabe verfügen

Bedienbar:

• Interface und Navigation muss von jedem Benutzer bedienbar sein.
• Website muss nur mit der Tastatur bedienbar sein

Verständlich: 

• Inhalte müssen verständlich geschrieben und gestaltet sein

Robust: 

• Die Webseite muss auf jedem Endgerät und jedem Browser funktionieren.

Was sind typische Probleme auf Webseiten?

Es gibt eine Vielzahl an Aspekten auf Webseiten, die für Menschen mit Beeinträchtigungen zum Hindernis werden können. Dazu gehören:

• Kontraste sind zu schwach, sodass Personen mit Sehschwäche Probleme haben könnten

• Farben sind nicht für Personen mit Farbschwächen wie Deuteranopie, Protanopie oder Tritanopie abgestimmt
• Text-to-Speech Funktion fehlt
• Alternativ Text fehlt
• Bildbeschreibungstext fehlt

• Videos haben keine Untertitel

• Inhalte sind nicht skalierbar

• Komplizierte Texte

Für wen gilt das BFSG?

Das BFSG gilt für jegliche Firmen im E-Commerce Bereich, wie Onlineshops, aber auch Banken, Personenbeförderungsdienste und Dienstleister im B2C Bereich.

Ausgenommen davon sind Unternehmen, die weniger als zehn Mitarbeitende oder einen Jahresumsatz unter zwei Millionen Euro haben. Wenn diese sogenannten Kleinstunternehmen jedoch BFSG relevante Produkte anbieten, gelten diese Ausnahmen nicht.

Wann gilt das BFSG?

Am 28. Juni 2025 wird das BFSG in Kraft treten. Für alle Webseiten, die davor schon existiert haben, gilt eine Übergangsfrist von fünf Jahren bis zum 27. Juni 2030. Alle Webseiten, die danach erstellt werden, müssen BFSG konform sein.

Die zuständigen Marktüberwachungsbehörden prüfen, ob Webseiten die Barrierefreiheitsanforderungen einhalten und fordern Unternehmen gegebenenfalls auf Änderungen vorzunehmen. Bei Nicht-Umsetzung der BFSG-Regularien kann ein Bußgeld von bis zu 100.000€ verhängt werden³.

Wie kann Text-to-Speech auf Webseiten umgesetzt werden?

Text-to-Speech lässt sich mit Hilfe von APIs (Application Programming Interfaces) auf Webseiten integrieren. Die API wandeln Text in eine Audiodatei um, damit diese auf der Webseite eingebettet werden kann. Es gibt viele APIs wie z.B. Amazon Polly, Google Cloud, Microsoft Azure, Murf.ai oder IBM Watson.

Wie prüfe ich ob Inhalte barrierefrei sind?

Um sicherzustellen, dass eine Website den Anforderungen des BFSG entspricht und für alle zugänglich ist, gibt es unterschiedliche Möglichkeiten. Hier sind ein paar Optionen das zu testen:

Automatisierte Tools nutzen:

Es gibt eine Vielzahl von Tools, die dabei helfen können, die Barrierefreiheit einer Website zu überprüfen. Mit dem kostenlosen Tool https://pagespeed.web.dev/ kann kontrolliert werden, wie barrierefrei deine Website ist und du kannst direkt sehen, welche Probleme vorhanden sind.

Auch die Seite https://www.wave.webaim.org/ eignet sich hervorragend, um eine Website auf Barrierefreiheit zu prüfen. Gib hierzu einfach deine Internetadresse ein und schon kannst du völlig kostenlos sehen, was gut umgesetzt wurde bzw. wo noch Verbesserungspotenzial herrscht.

Die Chrome Erweiterung „Lighthouse” ermöglicht es dir, deine Webseite auf verschiedene Kriterien zu untersuchen. Z.B. wird getestet ob Bilder einen alternativen Text haben oder Kontraste stark genug sind. Neben der Barrierefreiheit kannst du auch die Leistung und die SEO-Sichtbarkeit prüfen.

Mit dem Paciellogroup oder Adobe Color Checker kannst du die Farben deiner Webseite und Brand auf Kontraste und Farbschwächen überprüfen.

Und die Browser Erweiterung „HeadingsMap” ermöglicht es, die Überschriften-Struktur für jede einzelne Seite anzeigen zu lassen. Gerade für Menschen, die auf Sprachausgabe angewiesen sind, sind Überschriften eines der wichtigsten Mittel zur Orientierung. Daher ist es ratsam zu überprüfen, ob die Überschriften, die für sehende Menschen visuell erkennbar sind, auch von sogenannten Screenreadern korrekt erkannt werden.

Der BITV-Test ist ein vom Bundesministerium für Arbeit und Soziales entwickeltes Testverfahren und überprüft deine Webseite gründlich auf Barrierefreiheit. Das Besondere an diesem Test ist, dass er in Zusammenarbeit mit Menschen mit Behinderungen und Experten für Barrierefreiheit entwickelt wurde.

Weitere hilfreiche Tools können unter anderem auf folgender Seite gefunden werden: https://www.w3.org/WAI/ER/tools/

Manuelle Überprüfung:

Auch wenn automatisierte Tools hilfreich sind, können sie nicht alle Aspekte der Barrierefreiheit erfassen. Zusätzlich zu solchen Tools, sollte immer eine manuelle Prüfung der Website erfolgen, um sicherzustellen, dass deine Website für alle Nutzer zugänglich und bedienbar ist. Prüfe zum Beispiel die Lesbarkeit deiner Texte und die allgemeine Benutzerfreundlichkeit.

Oder lege mal deine Computermaus zur Seite und schaue, ob deine Website alleine mit der Tastatur navigiert werden kann. Das ist vor allem für Menschen mit motorischen Einschränkungen von entscheidender Bedeutung.

Benutzertests durchführen:

Nicht immer einfach bzw. kostengünstig möglich, aber definitiv eine der besten Möglichkeiten deine Website auf Barrierefreiheit zu überprüfen, ist es Menschen mit unterschiedlichen Beeinträchtigungen deine Website überprüfen zu lassen. So bekommst du das Feedback direkt aus erster Hand und es können mögliche Probleme und Barrieren aufgedeckt werden.

Auf der Seite www.rapidusertests.com können genau solche Benutzertests gebucht werden. Mit über 50.000 Nutzern hat rapidusertest eine große Auswahl an echten Menschen, um deine Website zu testen. Außerdem kannst du viele verschiedene Eigenschaften deiner Zielgruppe definieren.

Warum ist eine barrierefreie Website noch wichtig?

• Die Sichtbarkeit deiner Website steigt, weil der Algorithmus von Google barrierefreies Design besser bewertet. Das wiederum führt zu einer höheren Platzierung in den Suchergebnissen
• Nicht nur für Menschen mit Einschränkungen, sondern für alle Menschen verbessert sich die Benutzerfreundlichkeit. Der Grund ist eine einfache und intuitive Bedienung deiner Website.
• Ein barrierefreies Design spricht mehr Menschen an, wodurch sich deine Zielgruppe vergrößert.
• Und nicht zu vergessen: Ein barrierefreies Design ist ein wichtiger Schritt in Richtung sozialer Verantwortung

Zusammenfassung

Barrierefreies Webdesign ist nicht nur eine rechtliche Verpflichtung, sondern stellt auch sicher, dass niemand ausgeschlossen wird. Jeder sollte gleichermaßen Zugang zum Internet haben, unabhängig seiner Einschränkungen.

Webseitenbetreiber sollten sich auf jeden Fall frühzeitig mit den Anforderungen vertraut machen und sicherstellen, dass ihre Online-Präsenz den Bedürfnissen aller Benutzer gerecht wird.