Barrierefreie Website: BFSG, WCAG und was Sie jetzt tun muessen

Barrierefreiheit im Web: Warum es jetzt ernst wird

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstaerkungsgesetz (BFSG) in Deutschland. Es setzt die europaeische Richtlinie (European Accessibility Act) um und verpflichtet viele Unternehmen, ihre digitalen Angebote barrierefrei zu gestalten. Wer betroffen ist und nichts unternimmt, riskiert Abmahnungen und Bussgelder.

Doch Barrierefreiheit ist nicht nur eine gesetzliche Pflicht. Sie verbessert die Nutzererfahrung fuer alle, erweitert Ihre Zielgruppe und staerkt Ihr SEO.

Wer ist vom BFSG betroffen?

Das BFSG betrifft Unternehmen, die Produkte und Dienstleistungen fuer Verbraucher anbieten, insbesondere:

• Online-Shops und E-Commerce-Plattformen
• Bankdienstleistungen und Finanzprodukte
• Telekommunikationsdienste
• E-Books und E-Reader
• Personenbefoerderungsdienste (Ticketbuchung, Fahrplaninformationen)

Ausnahmen

• Kleinstunternehmen mit weniger als 10 Mitarbeitenden und unter 2 Millionen Euro Jahresumsatz
• B2B-Angebote, die sich ausschliesslich an Geschaeftskunden richten
• Angebote, bei denen Barrierefreiheit eine unverhaeltnismaessige Belastung darstellen wuerde (muss im Einzelfall begruendet werden)

WCAG 2.2: Der technische Standard

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard fuer barrierefreie Webinhalte. Das BFSG verweist auf die harmonisierte Norm EN 301 549, die wiederum auf WCAG 2.1 Level AA basiert. Es empfiehlt sich, direkt WCAG 2.2 AA umzusetzen.

Die vier Prinzipien

1. Wahrnehmbar (Perceivable)

Inhalte muessen fuer alle Sinne zugaenglich sein:

• Alternativtexte fuer alle informativen Bilder
• Untertitel fuer Videos und Audioinhalte
• Ausreichender Kontrast: Mindestens 4.5:1 fuer normalen Text, 3:1 fuer grossen Text
• Skalierbarer Text: Funktioniert bei 200 Prozent Zoom ohne Informationsverlust
• Keine rein farbbasierte Information: Fehlermeldungen nicht nur in Rot, sondern auch mit Text oder Icon

2. Bedienbar (Operable)

Alle Funktionen muessen mit verschiedenen Eingabemethoden nutzbar sein:

• Tastaturnavigation: Jedes Element muss per Tab-Taste erreichbar sein
• Fokus-Indikatoren: Sichtbare Markierung des aktuell fokussierten Elements
• Keine Zeitlimits: Oder die Moeglichkeit, sie zu verlaengern
• Skip-Navigation: Link zum Hauptinhalt fuer Screenreader-Nutzer
• Touch-Targets: Mindestens 24x24 Pixel (WCAG 2.2)

3. Verstaendlich (Understandable)

Inhalte und Bedienung muessen nachvollziehbar sein:

• Klare Sprache: Einfache, verstaendliche Formulierungen
• Konsistente Navigation: Gleiches Verhalten auf allen Seiten
• Fehlererkennung: Formulare mit klaren Fehlermeldungen und Korrekturhinweisen
• Sprach-Attribut: lang="de" im HTML fuer korrekte Screenreader-Aussprache

4. Robust

Inhalte muessen von verschiedenen Technologien interpretierbar sein:

• Semantisches HTML: Korrekte Verwendung von Ueberschriften, Listen, Landmarks
• ARIA-Labels: Wo semantisches HTML nicht ausreicht
• Valides HTML: Keine kaputten Tags oder fehlende Attribute
• Kompatibilitaet: Funktioniert mit gaengigen Screenreadern (NVDA, JAWS, VoiceOver)

Praktische Checkliste

Sofort umsetzbar

• [ ] Alle Bilder haben aussagekraeftige alt-Texte (oder alt="" fuer dekorative Bilder)
• [ ] Farbkontraste pruefen und anpassen
• [ ] Seite ist komplett per Tastatur bedienbar
• [ ] Fokus-Indikatoren sind sichtbar
• [ ] Formulare haben Labels, die mit den Eingabefeldern verknuepft sind
• [ ] Sprach-Attribut im HTML gesetzt
• [ ] Ueberschriftenhierarchie ist logisch (h1, h2, h3 -- keine Luecken)

Mittelfristig

• [ ] Videos mit Untertiteln versehen
• [ ] Skip-Navigation implementieren
• [ ] ARIA-Landmarks und -Rollen ueberpruefen
• [ ] Responsive Design auf Zoom-Kompatibilitaet testen
• [ ] Fehlermeldungen in Formularen verbessern
• [ ] Cookie-Banner per Tastatur bedienbar machen

Langfristig

• [ ] Barrierefreiheitserklaerung veroeffentlichen
• [ ] Regelmaessige Audits durchfuehren
• [ ] Nutzertests mit Menschen mit Behinderungen
• [ ] Schulung fuer Content-Redakteure

Tools fuer Barrierefreiheitstests

Automatisierte Tests

• axe DevTools (Browser-Extension): Findet etwa 30-40 Prozent der Probleme automatisch
• WAVE (WebAIM): Visuelles Overlay mit Fehlern und Warnungen
• Lighthouse (Chrome DevTools): Accessibility-Score und Verbesserungsvorschlaege
• Pa11y: Kommandozeilen-Tool fuer CI/CD-Integration

Manuelle Tests

• Tastatur-Test: Tab durch die gesamte Seite navigieren
• Screenreader-Test: NVDA (Windows, kostenlos) oder VoiceOver (macOS, eingebaut)
• Zoom-Test: Auf 200 Prozent zoomen und Funktionalitaet pruefen
• Kontrast-Checker: WebAIM Contrast Checker

Wichtig: Automatisierte Tools finden nur einen Teil der Probleme. Manuelle Tests und idealerweise Tests mit betroffenen Nutzern sind unverzichtbar.

Vorteile ueber die Pflicht hinaus

Barrierefreiheit bringt messbare Geschaeftsvorteile:

• Groessere Zielgruppe: In Deutschland leben ueber 10 Millionen Menschen mit Behinderungen
• Besseres SEO: Semantisches HTML, Alt-Texte und klare Struktur verbessern das Google-Ranking
• Bessere Nutzererfahrung: Was fuer Menschen mit Behinderungen funktioniert, funktioniert fuer alle besser
• Niedrigere Absprungraten: Zugaengliche Websites sind einfacher zu benutzen
• Rechtssicherheit: Schutz vor Abmahnungen und Bussgeldern

Was RawLinks empfiehlt

Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Wir empfehlen:

1. Ist-Analyse: Automatisierte und manuelle Pruefung des aktuellen Stands
2. Priorisierung: Die schwerwiegendsten Probleme zuerst beheben
3. Integration in den Workflow: Barrierefreiheit bei jedem neuen Feature mitdenken
4. Regelmaessige Audits: Mindestens halbjaehrlich den Stand ueberpruefen

Fazit

Das BFSG macht Barrierefreiheit fuer viele Unternehmen zur gesetzlichen Pflicht. Doch auch unabhaengig davon ist eine barrierefreie Website eine Investition, die sich auszahlt -- durch mehr Reichweite, bessere SEO-Performance und eine ueberlegene Nutzererfahrung. Beginnen Sie jetzt mit den wichtigsten Massnahmen und bauen Sie Barrierefreiheit schrittweise in Ihre digitale Strategie ein.