Barrierefreiheit im Web: Was das BFSG für Ihre Website bedeutet

Das Barrierefreiheitsstärkungsgesetz (BFSG) tritt am 28. Juni 2025 in Kraft und betrifft viele Unternehmen in Deutschland. Wer digitale Produkte oder Dienstleistungen anbietet, muss Barrierefreiheit gewährleisten. Unsere Webdesign-Experten sorgen dafür, dass Ihre Website alle Anforderungen erfüllt.

Wen betrifft das BFSG? Das Gesetz gilt für B2C-Unternehmen, die Produkte oder Dienstleistungen über digitale Kanäle anbieten. Konkret betroffen sind: Online-Shops und E-Commerce-Plattformen, Bankdienstleistungen und Finanz-Apps, Telekommunikationsdienste, E-Books und digitale Medien, Websites mit Selbstbedienungsfunktionen.

Was bedeutet WCAG 2.1 AA? Die Web Content Accessibility Guidelines definieren vier Prinzipien. Wahrnehmbar: Inhalte müssen für alle Sinne zugänglich sein. Alternative Texte für Bilder, Untertitel für Videos, ausreichende Kontraste. Bedienbar: Navigation per Tastatur muss möglich sein. Keine zeitkritischen Aktionen. Fokus-Indikatoren sichtbar.

Verständlich: Texte in klarer Sprache. Konsistente Navigation. Fehlermeldungen hilfreich formulieren. Formulare mit Labels und Erklärungen.

Robust: Inhalte müssen von assistiven Technologien interpretiert werden können. Semantisches HTML, ARIA-Attribute, valider Code.

Die häufigsten Barrieren auf Websites:

Fehlende Alt-Texte bei Bildern – Screenreader können den Inhalt nicht vermitteln. Unzureichende Farbkontraste – für Sehbehinderte nicht lesbar (Minimum 4.5:1 für normalen Text). Keine Tastatur-Navigation – Nutzer ohne Maus sind ausgesperrt. Fehlende Formular-Labels – Screenreader wissen nicht, welches Feld welche Eingabe erwartet. Nicht-responsive Gestaltung – Inhalte bei Zoom 200% nicht nutzbar.

Schritte zur barrierefreien Website:

1Audit durchführen

Prüfen Sie Ihre Website mit Tools wie WAVE, axe DevTools oder Lighthouse auf WCAG-Verstöße.

2Semantisches HTML

Verwenden Sie korrekte Überschriften-Hierarchien (h1-h6), Listen, Tabellen und Landmarks (header, nav, main, footer).

3Kontraste prüfen

Mindestens 4.5:1 für normalen Text, 3:1 für großen Text. Tools wie WebAIM Contrast Checker helfen.

4Tastatur-Navigation testen

Navigieren Sie komplett ohne Maus durch Ihre Website. Jedes interaktive Element muss erreichbar und bedienbar sein.

5Bilder mit Alt-Texten versehen

Beschreiben Sie den Inhalt und Zweck jedes Bildes. Dekorative Bilder erhalten ein leeres alt-Attribut.

6Formulare optimieren

Jedes Eingabefeld braucht ein zugeordnetes Label. Fehlermeldungen müssen klar und hilfreich sein.

7Videos untertiteln

Alle Video-Inhalte benötigen Untertitel und idealerweise eine Audiodeskription.

Kosten und ROI: Die Nachrüstung einer bestehenden Website kostet je nach Umfang 2.000-10.000 €. Bei einem Relaunch integriert man Barrierefreiheit idealerweise von Anfang an – die Mehrkosten liegen bei nur 10-15%. Der ROI: Zugang zu 15% mehr potenziellen Nutzern, bessere SEO-Rankings (Google belohnt semantisches HTML) und Vermeidung von Bußgeldern.

Auch die DSGVO-Konformität und Barrierefreiheit gehen Hand in Hand – beides erfordert Transparenz und nutzerfreundliches Design.