Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) stehen viele Website-Betreiber vor konkreten Umsetzungspflichten. Doch welche Anforderungen gelten tatsächlich für eine barrierefreie Website? Dieser Artikel zeigt Ihnen die rechtlich bindenden Kriterien und gibt praktische Orientierung für die Umsetzung.
Das BFSG verweist auf die Web Content Accessibility Guidelines (WCAG) 2.1 auf Level AA als technischen Standard. Diese international anerkannten Richtlinien definieren konkrete Erfolgskriterien, die Ihre Website erfüllen muss. Die WCAG gliedern sich in vier grundlegende Prinzipien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit.
Für Betreiber von Onlineshops und digitalen Dienstleistungen bedeutet dies: Ab 2025 müssen neue Websites diese Standards vollständig erfüllen, bestehende Websites haben Übergangsfristen bis 2030. Eine rechtssichere Prüfung der Barrierefreiheit hilft Ihnen, den aktuellen Stand Ihrer Website zu ermitteln.
Jedes Bild, jede Grafik und jedes Icon auf Ihrer Website benötigt einen aussagekräftigen Alternativtext (Alt-Text). Dieser ermöglicht blinden und sehbehinderten Nutzern mit Screenreadern, die visuellen Informationen zu erfassen. Dekorative Elemente erhalten einen leeren Alt-Text, informative Bilder eine präzise Beschreibung ihrer Funktion oder ihres Inhalts.
Die Farbkontraste zwischen Text und Hintergrund müssen bestimmte Mindestwerte erfüllen: 4,5:1 für normalen Text, 3:1 für großen Text. Farbe darf nie das einzige Mittel zur Informationsvermittlung sein – wichtige Hinweise müssen zusätzlich durch Form, Position oder Text gekennzeichnet werden. Nutzer müssen zudem die Möglichkeit haben, Texte auf bis zu 200% zu vergrößern, ohne dass Funktionalität verloren geht.
Videos benötigen Untertitel für gehörlose Nutzer, Audio-Inhalte erfordern Transkripte. Bei voraufgezeichneten Videos sind zusätzlich Audiodeskriptionen erforderlich, die visuelle Informationen verbal beschreiben. Diese Anforderungen gelten besonders für Onlineshops mit Produktvideos.
Alle Funktionen Ihrer Website müssen ohne Maus, ausschließlich über die Tastatur bedienbar sein. Dies betrifft Navigationselemente, Formulare, interaktive Komponenten und auch komplexe Widgets. Die Tabulatorreihenfolge muss logisch sein und der Tastaturfokus sichtbar bleiben.
Zeitlimits müssen vermeidbar, anpassbar oder verlängerbar sein. Automatisch ablaufende Inhalte wie Karussells müssen pausierbar sein. Bewegte, blinkende oder scrollende Inhalte, die automatisch starten und länger als fünf Sekunden laufen, müssen sich stoppen lassen.
Inhalte dürfen nicht mehr als dreimal pro Sekunde blinken, um epileptische Anfälle zu vermeiden. Dies betrifft Animationen, Werbeeinblendungen und Effekte gleichermaßen.
Mehrere Navigationswege zum gleichen Ziel erhöhen die Barrierefreiheit: Hauptmenü, Suchfunktion, Sitemap und Breadcrumb-Navigation. Überschriften müssen hierarchisch korrekt strukturiert sein (H1, H2, H3) und die Inhaltsstruktur widerspiegeln. ARIA-Landmarks kennzeichnen wichtige Bereiche wie Header, Navigation, Hauptinhalt und Footer.
Die Hauptsprache der Website muss im HTML-Code definiert sein. Sprachwechsel innerhalb der Seite werden ausgezeichnet. Texte sollten auf einem Sprachniveau formuliert sein, das auch Menschen mit Lernschwierigkeiten verstehen können. Fachbegriffe und Abkürzungen erhalten bei der ersten Verwendung eine Erklärung.
Navigationskomponenten, die auf mehreren Seiten vorkommen, müssen an derselben Position erscheinen. Funktionen werden einheitlich benannt. Ein Kontextenwechsel (etwa das Öffnen neuer Fenster) darf nicht allein durch das Setzen des Fokus erfolgen, sondern erfordert eine bewusste Nutzeraktion.
Formularfelder benötigen aussagekräftige Beschriftungen und Hinweise zur erwarteten Eingabe. Fehlermeldungen müssen klar formulieren, was falsch ist und wie es korrigiert werden kann. Bei rechtlichen oder finanziellen Transaktionen müssen Eingaben überprüfbar und korrigierbar sein, bevor sie abgeschickt werden.
Der HTML-Code muss valide sein und den W3C-Standards entsprechen. Öffnende und schließende Tags müssen korrekt verschachtelt sein, IDs eindeutig und Attribute vollständig. Besonders wichtig ist die korrekte Verwendung von ARIA-Attributen, die assistiven Technologien wie Screenreadern zusätzliche Informationen über Funktion und Zustand von Elementen liefern.
Benutzerdefinierte Komponenten wie Dropdown-Menüs, Modal-Dialoge oder Tabs benötigen die richtigen ARIA-Rollen, Zustände und Eigenschaften, damit Screenreader sie korrekt interpretieren können. Der Name, die Rolle und der Wert von UI-Komponenten müssen programmatisch ermittelbar sein.
Barrierefreiheit lässt sich nicht nachträglich "aufsetzen" – sie muss von Anfang an im Design- und Entwicklungsprozess berücksichtigt werden. Designsysteme sollten barrierefreie Komponenten als Standard enthalten. Entwickler müssen semantisches HTML verwenden und JavaScript so einsetzen, dass es die Barrierefreiheit unterstützt, nicht behindert.
Automatisierte Tools können etwa 30-40% der WCAG-Kriterien prüfen, ersetzen aber keine manuelle Überprüfung. Ein professioneller Accessibility-Check kombiniert automatisierte Scans mit manuellen Tests durch Experten und idealerweise Tests mit echten Nutzern assistiver Technologien.
Website-Betreiber müssen eine Erklärung zur Barrierefreiheit bereitstellen, die den Stand der Konformität dokumentiert, bekannte Einschränkungen benennt und einen Feedback-Mechanismus für Barrierefreiheitsprobleme anbietet. Diese Transparenz ist Teil der gesetzlichen Anforderungen.
Produktfilter müssen tastaturzugänglich sein, Produktbilder aussagekräftige Alt-Texte haben. Der gesamte Checkout-Prozess muss barrierefrei bedienbar sein, inklusive Zahlungsauswahl und Adresseingabe. Fehlermeldungen bei der Bestellung müssen klar und korrigierbar sein.
Komplexe Formulare benötigen gruppierende Fieldsets, klare Labels und Hilfetexte. Pflichtfelder müssen nicht nur farblich, sondern auch textuell gekennzeichnet sein. Validierung sollte in Echtzeit erfolgen und Fehler konkret benennen.
Auch Backend-Systeme fallen unter die Barrierefreiheitsanforderungen, wenn sie von Mitarbeitern genutzt werden. Redaktionssysteme sollten Redakteure dabei unterstützen, barrierefreie Inhalte zu erstellen, etwa durch Warnungen bei fehlenden Alt-Texten oder unzureichenden Kontrasten.
Viele Websites scheitern an vermeintlich einfachen Anforderungen: fehlende Alt-Texte bei Bildern, unzureichende Kontraste bei Links und Buttons, unleserliche Schriftgrößen, fehlende Fokusindikatoren bei der Tastaturbedienung oder falsch verschachtelte Überschriften. Auch PDF-Dateien werden oft vergessen – auch sie müssen barrierefrei sein, wenn sie auf der Website bereitgestellt werden.
Ein weiterer kritischer Punkt sind komplexe JavaScript-Frameworks, die ohne Rücksicht auf Barrierefreiheit eingesetzt werden. Single-Page-Applications erfordern besondere Aufmerksamkeit, da Seitenwechsel vom Screenreader erkannt werden müssen.
Die Kosten für die Umsetzung hängen stark vom Ausgangszustand ab. Eine von Beginn an barrierefreie entwickelte Website verursacht nur 10-15% Mehrkosten. Die nachträgliche Umstellung bestehender Websites kann je nach Komplexität zwischen 5.000 und 50.000 Euro kosten. Laufende Wartung und regelmäßige Audits sollten eingeplant werden.
Investitionen in Barrierefreiheit zahlen sich jedoch aus: Sie erweitern Ihre Zielgruppe um etwa 10-15% der Bevölkerung mit Beeinträchtigungen, verbessern die Benutzerfreundlichkeit für alle Nutzer und reduzieren rechtliche Risiken erheblich.
Barrierefreie Website Anforderungen sind keine vage Empfehlung, sondern konkrete, messbare Kriterien nach WCAG 2.1 Level AA. Die vier Prinzipien Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit bieten einen klaren Rahmen für die Umsetzung. Website-Betreiber sollten frühzeitig mit der Umsetzung beginnen, da nachträgliche Anpassungen deutlich aufwändiger sind. Mit systematischer Planung, professionellen Tests und kontinuierlicher Wartung schaffen Sie eine Website, die rechtssicher, zukunftsfähig und für alle Menschen nutzbar ist.