Barrierefreie Website: Gesetze, Beispiele und Tipps für die Umsetzung

Rund 80 Millionen Bürger in der EU leben mit Beeinträchtigungen wie etwa einer Sehbehinderung, einer motorischen oder kognitiven Störung oder einer Hörschwäche. Wir sprechen von zehn bis 30 Prozent der Bevölkerung, die Websites nicht uneingeschränkt nutzen können und dadurch keine gleichberechtigte Teilhabe am gesellschaftlichen Leben erfahren.

Wenn wir uns etwas umschauen, so nehmen es die meisten Websites mit dem Thema Accessibility (Barrierefreiheit) nicht so genau. Mal abgesehen von den Internetseiten der öffentlichen Verwaltung, von Krankenhäusern oder von Universitäten, für welche Barrierefreiheit bereits seit einiger Zeit Pflicht ist.

Was ist eine barrierefreie Website?

Eine barrierefreie Website ist eine Internetseite, die von Besuchern mit Beeinträchtigungen uneingeschränkt genutzt werden kann. Zu diesen Beeinträchtigungen zählen etwa eine Sehbehinderung, eine Hörschwäche, motorische oder kognitive Störungen.

Barrierefreie Websites in der Privatwirtschaft stecken quasi in den Kinderschuhen. Das soll sich nun mit dem European Accessibility Act (EAA) ändern: Corporate Websites sowie Webangebote von E-Commerce-Shops müssen ab 2025 für alle Nutzer in der Europäischen Union zugänglich und zu bedienen sein. Barrierefreiheit wird sozusagen zur Pflicht. Deutschland setzt mit dem Barrierefreiheitsstärkungsgesetz (BFSG) die EU-Richtlinie inhaltlich um. Das Gesetz tritt 2025 in Kraft.

Grundlage für die Umsetzung von Barrierefreiheit bilden die Web Content Accessibility Guidelines (WCAG). Diese international anerkannte Richtlinie definiert anhand von Erfolgskriterien und Konformitätsstufen seit 2018 den technischen Standard für die Gestaltung und Entwicklung barrierefreier Informationstechnik.

UX-Designer und Webentwickler tun gut daran, Barrierefreiheit und Geräteunabhängigkeit im Entstehungsprozess von Anfang an mitzudenken: Accessibility first (Barrierefreiheit zuerst)! Es gilt also, nicht erst ab 2025 den gesetzlichen Standards zu genügen. Das Ziel sollte es sein, durch neue Designprinzipien digitale Angebote für alle Menschen stets leicht bedienbar zu gestalten.

Barrierefreie Website: Was sind die häufigsten Barrieren im Web?

Grundsätzlich lässt sich zwischen inhaltlich-gestalterischen und technischen Hürden auf Websites und in E-Commerce-Shops unterscheiden.

Inhaltlich-gestalterische Barrieren können sein:

• Sehr häufig werden Farben und Schriften falsch verwendet, sind zu klein, wenig kontrastreich und können so von Menschen mit einer Sehschwäche nur unzureichend erfasst werden. Die Wahrnehmbarkeit ist somit eingeschränkt.
• Vor allem blinde Menschen haben Probleme, wenn Inhalte an Farben gekoppelt sind. Ein Beispiel: „Die grüne Schaltfläche rechts unten klicken“. CTAs (Call-to-Actions) mit kombinierten Text- und Farbinformationen sind für Blinde kaum zu entschlüsseln.
• Die Texte sind zu komplex und schwer zu verstehen.
• Bei Audioinhalten und aufgezeichneten Videos fehlt die akustische Bildbeschreibung (Audiodeskription) und die Untertitelung für schwerhörige und gehörlose Menschen.

Technische Barrieren sind:

• Nicht für das Auslesen mit Screenreadern und Braillezeilen aufbereitet. Screenreader und Braillezeilen sind ein Hilfsmittel für blinde Menschen. Screenreader geben Webinhalte über Audiodateien wieder. Benötigt wird eine klare semantische HTML-Strukturierung, damit die Texte, Tabellen und Formulare vom Screenreader und den Braillezeilen auf der Tastatur richtig erfasst und vorgelesen werden können.
• Bei den Bildern fehlt der Alternativtext (Alt-Texte). Nur wenn ein sogenannter ALT-Tag hinterlegt ist, können Screenreader und andere Hilfstechnologien das Bild aussagekräftig beschreiben und richtig interpretieren.
• Viele Websites sind auf einem alten Technikstand. Konkret bedeutet das: Diese Websites sind nicht responsive erstellt, auf Smartphones und in modernen Webbrowsern nur erschwert nutzbar. Das beeinträchtigt die Geräteunabhängigkeit.
• Die Skalierbarkeit (Vergrößerbarkeit) über den Webbrowser ist nicht ausreichend beziehungsweise über die Website blockiert.
• Viele Websites können nicht über Tastatur- oder Sprachbefehle bedient, angesteuert oder navigiert werden.

Barrierefreie Website: Ein Beispiel, wie sie aussehen kann

Obwohl Barrierefreiheit im Netz noch lange nicht selbstverständlich ist, gibt es bereits einige bekannte Websites, die mit gutem Beispiel vorangehen.

Dazu gehört beispielsweise die Internetseite der BBC. Die öffentlich-rechtliche Rundfunkgesellschaft implementiert diverse Methoden wie das Hinterlegen von Alternativtexten oder Audiodeskriptionen und Untertiteln. Außerdem haben Nutzer die Möglichkeit, die Webinhalte zu vergrößern und die Seite über die Tastatur zu bedienen. Auch durch eine hohe Lesbarkeit sowie einfache Navigation zeichnet sich die BBC-Website aus.

via Giphy

Die neue Europäische Richtlinie (EAA) und das Barrierefreiheitsstärkungsgesetz (BFSG)

Der neue Europäische Rechtsakt für Barrierefreiheit (European Accessibility Act) hat zum Ziel, Unternehmen neue Marktchancen zu eröffnen und Menschen mit Behinderung ein größeres Angebot an barrierefreien Produkten und Dienstleistungen zu bieten. Diese EU-Richtlinie nimmt somit Privat- und Handelsunternehmen verstärkt in die Pflicht, ihren Webauftritt sowie ihre Produkte und Dienstleistungen ab 2025 barrierefrei zu gestalten.

Im Fokus stehen zunächst die Nutzerfreundlichkeit von

• Geldautomaten,
• Fahrausweis- und Check-in-Automaten,
• Kommunikationsdiensten,
• Plattformen und Services für den Online-Handel und elektronischen Geschäftsverkehr,
• Bankdienstleistungen sowie
• Dienstleistungen im Bereich Flug-, Bus-, Bahn- und Schiffsverkehr.

Von der EU-Regelung ausgenommen werden Kleinstunternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz unter zwei Millionen Euro. Diese Ausnahme gilt allerdings nicht, wenn digitale Dienstleistungen angeboten und verkauft werden.

Gefordert sind die jeweiligen Mitgliedstaaten der EU, dies per Gesetz auszuformulieren und zu überwachen.

Deutschland hat mit dem Barrierefreiheitsstärkungsgesetz (BFSG) die neue Regulierung eingeführt und plant auch eine Überarbeitung des Behindertengleichstellungsgesetzes (BGG). Das BFSG tritt 2025 in Kraft und verpflichtet Privatunternehmen zur Barrierefreiheit. Die Übergangsbestimmungen für Dienstleistungen sind bis 2030 und für Selbstbedienungsterminals bis 2040 festgelegt.

Die Einhaltung der Vorgaben sollen schließlich die einzelnen Bundesländer überwachen. Wie strikt dies tatsächlich geahndet wird und welche Sanktionen drohen, ist bisher noch unklar.

Barrierefreie Website: Tools und Tipps

Bereits in der Konzeptionsphase einer Website bzw. eines Shops muss das Thema Barrierefreiheit berücksichtigt werden. Folgende Tipps und Tools sollen dir bei der Umsetzung deines Webprojektes weiterhelfen und Menschen mit Beeinträchtigungen die Nutzung deiner Website erleichtern.

Kontrastreiche Farben verwenden

Generell sind Farbkombinationen oft wenig kontrastreich. Wenn du feine Schriften verwendest, benötigst du einen höheren Kontrast, und je kleiner die Schrift ist, desto höher sollte das Kontrastverhältnis zum Hintergrund sein. Berücksichtige insbesondere auf Smartphones die Sonneneinstrahlung und Reflexionen! Teste auch den Schwarz-Weiß-Kontrast. Dieser kann oft zu intensiv wirken.

Für die Konformität mit der EU-Richtlinie ist ein Kontrastverhältnis von mindestens 4,5:1 zu beachten. Ob deine Farben den idealen Kontrast haben, kannst du mit Kontrastchecker und Kontrastrechner ausgiebig testen.

Auf Farbenblindheit achten

Eine Rot-Grün-Sehschwäche ist stark verbreitet, unter Männern ist fast jeder zehnte davon betroffen. Menschen mit einer Deuteranopie (Grün-Sehschwäche) bzw. Protanopie (Rot-Sehschwäche) können die beiden Farben nicht voneinander unterscheiden.

Mit dem Color Blindness Simulator kannst du testen, wie das aussieht. Versuche generell, Farben sparsam einzusetzen und klar voneinander abzugrenzen.

Nachtmodus (Dark Mode) anbieten

Der dunkle Modus einer Website ist nicht nur bei Entwicklern besonders beliebt, sondern hilft auch Menschen mit speziellen Augenerkrankungen (etwa Linsentrübungen) beim Lesen. Viele Nutzer berichten, dass die Augen im Nachtmodus weniger schnell ermüden bzw. auf Smartphones bei Sonneneinstrahlung entlastet werden. Der Nachtmodus ist ein Nice-to-have, aber kein Muss!

Serifenlose Schriften nutzen, feine oder fette Schriftstärken vermeiden

Für Menschen mit Sehbehinderungen sind serifenlose Schriftarten gut geeignet. Je nach Font empfiehlt sich die Verwendung der regulären Strichstärke. Feine (light) und fette (bold) Schriftstärken solltest du möglichst vermeiden. Hervorhebungen (Fettierungen) solltest du sparsam einsetzen. Großbuchstaben erschweren ebenso die Lesbarkeit für Personen mit Sehschwäche.

Bedenke zudem, dass es für Legastheniker (Menschen mit Rechtschreib- und Leseschwäche) sogar eine spezielle Typografie gibt. Es hat sich gezeigt, dass auch Legastheniker serifenlose Schriften bevorzugen, bei denen sich die Buchstaben klar voneinander unterscheiden.

Schriftgröße nicht weniger als 14px

Mit einem Schriftgrößenrechner lässt sich ganz praktisch die ideale Schriftgröße nach DIN 1450 ermitteln. Berechne idealerweise die Mindestgröße für Smartphone-, Tablet- und Desktop-Screen. Erhöhe die Schriftgröße um zehn Prozent, wenn heller Text auf dunklem Hintergrund zur Anwendung kommt.

Für den Zeilenabstand gilt als Faustregel mindestens 120 Prozent der Schriftgröße. Für den Fließtext sollte die Zeilenlänge maximal aus 80 Zeichen bestehen und linksbündig ausgerichtet sein. Zentrierten und rechtsbündigen Flattersatz solltest du möglichst vermeiden. Behalte zudem im Blick, dass Text nicht unbedingt über Bilder oder Farbverläufe gesetzt wird.

Semantisches HTML-Markup verwenden

Semantische HTML-Auszeichnung hilft Bildschirmlesegeräten, die Struktur einer Website zu erkennen und diese Informationen auch strukturiert an die Benutzer weiterzugeben. Dabei werden im HTML geeignete Tags wie <header>, <nav>, <main>, <article>, <section> usw. verwendet, die den Strukturelementen der Seite eine Bedeutung zuweisen.

ARIA-Attribute verwenden

ARIA-Attribute (Accessible Rich Internet Applications) helfen unterstützenden Technologien, dynamische Inhalte und Komponenten der Benutzeroberfläche genauer zu interpretieren. ARIA-Landmarken ermöglichen es beispielsweise Bildschirmlesern, wichtige Abschnitte einer Website wie Kopf- und Fußzeilen oder Hauptinhaltsbereiche zu identifizieren.

Weitere hilfreiche Usability-Tipps findest du auf leserlich.info.

Die Macht der Wörter: Texten in leichter und einfacher Sprache

Etwa 15 Prozent der Weltbevölkerung sind von Legasthenie betroffen. Dabei handelt es sich um einen gentechnischen Wahrnehmungsfehler, welcher diese spezielle Lese-Rechtschreibschwäche bei Kindern und Erwachsenen begründet.

Eine LEO-Studie aus dem Jahr 2018 hat ebenfalls ermittelt, dass 6,2 Millionen deutsch sprechende Erwachsene (12 Prozent) eingeschränkt lesen und schreiben. Leichte Sprache kann auch für Menschen, die keine Muttersprachler sind oder unter einer Konzentrationsschwäche leiden, potentielle Hürden überwinden.

Doch auch für professionelle Texter ist es nicht immer leicht, einfach zu schreiben. Insbesondere dann, wenn der Sachverhalt oder das Thema fachspezifisch ist. Aber wenn die Texte auf der Website zu kompliziert für die Leser sind, fühlt sich ein beachtlicher Teil der User ausgeschlossen. Nutze die Macht der Wörter und trimme dich und deine Mitarbeiter darauf, leicht verständlich, nutzerfreundlich und inklusiv zu schreiben.

Es gibt einige wichtige Regeln, welche du beim Schreiben der Website-Texte beachten solltest:

1. Verwende einfache Wörter und keine Fremdwörter oder Abstraktionen
2. Schreibe kurze und aktive Sätze mit maximal 15 Wörtern
3. Benutze nur eine leicht zu verstehende Aussage pro Satz
4. Vermeide Abkürzungen und zusammengesetzte Wörter
5. Ergänze Fachbegriffe durch Erläuterungen
6. Achte auf ausreichend Weißraum und genügend Zeilenabstand
7. Baue aussagekräftige Überschriften (h1-h5) und Absätze ein
8. Benutze Bilder und kennzeichne sie mit dem ALT-Tag
9. Teste die Inhalte auf ihre Barrierefreiheit, etwa durch Schulungen oder Prüfer im Netzwerk Leichte Sprache.

Website-Check: Ist deine Website barrierefrei?

Ob deine Website barrierefrei ist, kannst du mit den kostenlosen Browser-Tools WAVE und AChecker schnell selbst im Online-Check testen.

Falls deine Website oder dein Shop auf WordPress basiert, kannst du zudem mit den kostenlosen Plug-ins WP Accessibility und One Click Accessibility ganz einfach einen Online-Barriere-Check machen.

Tipps zum Accessibility-Check mit WAVE

WAVE bewertet Websites nach den Erfolgskriterien der Web Content Accessibility Guidelines WCAG 2.1, welche die Grundlage für die gesetzlichen Anforderungen des BFSG und der EU-Richtlinie bilden. Wichtig ist, dass du mit deiner Website mindestens die Konformitätsstufe AA der WCAG erreichst.

• Teste in der „No Styles“-Ansicht: Alle Stylesheets werden deaktiviert und du kannst prüfen, ob die Lesereihenfolge passt.
• WAVE zeigt den Alternativtext neben dem Bild an. Achte darauf, dass der Alt-Text schlüssig und leicht verständlich ist.
• Das Code-Panel in WAVE ist hilfreich, um z. B. die Bezeichnungs- und Eingabefelder in Formularen zu evaluieren.
• Mit der Browser-Extension können auch dynamisch generierte Inhalte aus Skripten und passwortgeschützten Seiten getestet werden.

Wenn du die Anpassungen aus den Tools umgesetzt hast, kannst du die Website nochmal anhand der WCAG-Checkliste des BITV-Tests (siehe unten) prüfen und am besten abschließend die Zugänglichkeit per Tastatur und in einem Screenreader wie VoiceOver (Mac) oder NVDA (Windows) aktiv testen.

Falls du eine offizielle Bestätigung haben möchtest, empfiehlt sich der BIK BITV-Test. Dies ist ein kostenpflichtiges Verfahren zur umfassenden und zuverlässigen Prüfung der Barrierefreiheit von Websites durch ausgewählte Experten in Deutschland. Der BITV-Test definiert 98 Prüfschritte. Das Prüfungsverzeichnis enthält (zusätzlich zu den WCAG 2.1 Erfolgskriterien oben) 38 weitere Anforderungen, die die EN 301 549 für Webinhalte formuliert.

Fazit

Die neue Europäische Richtlinie beschert dem Thema Inklusion durch Barrierefreiheit in der Digitalbranche neue Aufmerksamkeit und nimmt nicht zuletzt private Unternehmen in die Pflicht. UX-Designer und Webentwickler sind in erster Linie gefordert, alle kommenden Projekte und digitalen Angebote barrierefrei zu gestalten und umzusetzen – und sorgen dabei auch gleichzeitig für Vorteile wie eine erweiterte Zielgruppe oder Suchmaschinenoptimierung.

Die beste Orientierung bieten nach wie vor die Web Content Accessibility Guidelines des W3C. Mithilfe eines Browser-Tools wie WAVE kannst du deine Website sehr gut einem grundlegenden Online-Check unterziehen. Designs zu vereinfachen und Barrierefreiheit zu priorisieren, ist die Devise im Hinblick auf 2025.

Wenn wir es sportlich nehmen, soll Barrierefreiheit zu einer beliebten Paradedisziplin werden. Und das Gute daran ist: Sind digitale Dienste und Angebote leichter und einfacher in ihrer Handhabung, schafft das Vorteile für alle Menschen. Egal ob mit oder ohne Einschränkung.

Häufig gestellte Fragen

Wer muss eine barrierefreie Website haben?

Öffentliche Behörden sowie gewisse Einrichtungen, darunter Krankenhäuser und Universitäten, müssen eine barrierefreie Website zur Verfügung stellen. Jedoch sollen mit dem 2025 in Kraft tretenden Barrierefreiheitsstärkungsgesetz auch Privatunternehmen dazu verpflichtet werden, ihre Websites barrierefrei zu gestalten.

Bis wann müssen Websites barrierefrei sein?

Während bestimmte Websites, etwa die von öffentlichen Behörden, bereits jetzt barrierefrei sein müssen, sind Privat- und Handelsunternehmen erst ab 2025 gesetzlich dazu verpflichtet.

Welche Richtlinien und Standards sollten bei der Entwicklung einer barrierefreien Website berücksichtigt werden?

Bei der Entwicklung einer barrierefreien Website sollten die Richtlinien der Web Content Accessibility Guidelines (WCAG) berücksichtigt werden.

Welche Barrieren gibt es im Internet?

Im Internet gibt es sowohl inhaltlich-gestalterische Barrieren, unter anderem aufgrund von Schriftfarbe und -größe oder fehlender Untertitel, als auch technische Barrieren wie unzureichende Skalierbarkeit oder fehlende Navigation über Tastatur- oder Sprachbefehle.

Wie viele Websites sind nicht barrierefrei?

Laut einer WebAIM-Studie, die im März 2023 veröffentlicht wurde, sind 96 Prozent der meist genutzten Websites nicht barrierefrei.

Stephan Raffeiner

Stephan Raffeiner ist Digital-Marketing-Experte und Blogautor. Er ist Kursreferent und arbeitet als Webdesigner. Auf digitalmarketingblog.it schreibt er über Online-Marketing-Themen, E-Commerce-Trends und berichtet über Aktuelles aus den Bereichen WordPress, UX/UI-Design, SEO, Digital Analytics, Social Media und Web3.