Barrierefreie Website nach BFSG: Was KMU 2026 wissen müssen.

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit 28. Juni 2025 in Kraft. Viele KMU haben es noch nicht umgesetzt, weil unklar ist, wer genau betroffen ist und was konkret zu tun ist. Dieser Leitfaden bringt 2026 Klarheit und zeigt dir, wie du pragmatisch vorgehst.

Wer ist betroffen?

Das BFSG gilt für Produkte und Dienstleistungen, die im „elektronischen Geschäftsverkehr" angeboten werden — also alles, was direkt online verkauft, gebucht oder bestellt werden kann. Konkret betroffen sind u. a.:

• Online-Shops jeder Art.
• Buchungs- und Terminsysteme (z. B. für Arztpraxen).
• Websites von Banken, Zahlungsdienstleistern und Telekommunikationsanbietern.
• Apps und digitale Ticketsysteme.

Ausnahmen: Reine Info-Websites ohne Buchungs- oder Shop-Funktion sind formal nicht BFSG-pflichtig. Kleinstunternehmen (unter 10 Beschäftigten UND unter 2 Mio. € Jahresumsatz) sind bei reinen Dienstleistungsangeboten ebenfalls ausgenommen — nicht aber bei Produktverkauf.

Praxis-Tipp: Auch wenn du nicht formal verpflichtet bist, lohnt sich Barrierefreiheit. Sie verbessert die Usability für alle, reduziert Support-Anfragen und rankt besser bei Google.

Was bedeutet „barrierefrei" technisch?

Der technische Standard heißt WCAG 2.1 Level AA (Web Content Accessibility Guidelines). Das sind Richtlinien, die 2008 vom W3C veröffentlicht und seitdem mehrfach aktualisiert wurden. Sie sind in vier Prinzipien gegliedert:

• Wahrnehmbar: Alle Inhalte müssen für Nutzer wahrnehmbar sein — auch für Menschen mit Sehbehinderung, Hörbehinderung oder kognitiven Einschränkungen.
• Bedienbar: Navigation muss per Tastatur und per Screenreader funktionieren, nicht nur per Maus.
• Verständlich: Texte lesbar, Sprache erkennbar, Fehler verständlich erklärt.
• Robust: Die Seite funktioniert mit verschiedenen Browsern und Hilfstechnologien.

Die häufigsten Barrieren — und wie du sie behebst

Fehlende Alt-Texte bei Bildern

Jedes Bild mit Informationsgehalt braucht einen Alt-Text. Für rein dekorative Bilder setzt du alt="" (leerer String). Wer das nicht angibt, lässt Screenreader-Nutzer raten. Faustregel: Beschreibe kurz, was auf dem Bild zu sehen ist und warum es an dieser Stelle steht.

Schlechte Farbkontraste

Text auf Hintergrund muss ein Kontrastverhältnis von mindestens 4.5:1 haben (für großen Text 3:1). Hellgrau auf Weiß — ein beliebter Agentur-Look — ist oft nicht konform. Prüf-Tool: contrast-ratio.com. Pragmatischer Fix: Alle Textfarben mindestens auf #555 bei weißem Hintergrund setzen, besser #333 oder #222.

Nicht-tastaturbedienbare Elemente

Jeder Button, jeder Link, jedes Formularfeld muss per Tab erreichbar und per Enter/Space auslösbar sein. Menüs, die sich nur per Hover öffnen, sind problematisch. Auch eigene Click-Handler auf divs ohne role und tabindex fallen durch. Fix: Native HTML-Elemente verwenden (button, a, input), nicht div mit onClick.

Fehlende Formular-Labels

Jedes Eingabefeld braucht ein sichtbares oder zumindest per aria-label erreichbares Label. Placeholder-Text allein reicht nicht — er verschwindet, sobald der Nutzer tippt.

Unklare Überschriftenstruktur

Screenreader-Nutzer navigieren per Überschriften-Hierarchie. Eine Seite darf nur ein h1 haben, darauf folgen h2, dann h3. Keine Sprünge (h1 direkt zu h4). Überschriften sollten nicht nur gestylt, sondern semantisch als Überschriften ausgezeichnet sein.

Fehlende Fokus-Indikatoren

Wenn ein Nutzer per Tab navigiert, muss sichtbar sein, wo er gerade ist. Viele CSS-Resets entfernen den Browser-Default. Richtig: einen eigenen Fokus-Style setzen (z. B. outline: 2px solid blue; outline-offset: 2px).

Barrierefreiheitserklärung

Betroffene Unternehmen müssen auf ihrer Website eine Barrierefreiheitserklärung veröffentlichen, die beschreibt:

• Welche WCAG-Kriterien erfüllt sind.
• Welche Barrieren aktuell noch bestehen.
• Wie Nutzer Barrieren melden können (Kontakt).
• Wann zuletzt geprüft wurde.

Typischerweise wird die Erklärung im Footer verlinkt, neben Impressum und Datenschutz.

Prüfung und Test

Es gibt gute kostenlose Tools für eine erste Prüfung:

• WAVE (wave.webaim.org) — Browser-Overlay, das sofort Fehler markiert.
• Lighthouse (in Chrome DevTools) — Accessibility-Score und konkrete Fehlerliste.
• axe DevTools (Browser-Extension) — automatisierte Tests.

Automatisiert findest du etwa 30 bis 40 % der Probleme. Den Rest (Tastatur-Navigation, Screenreader-Verhalten, Textverständlichkeit) musst du manuell prüfen.

Kosten

Wer eine komplett neue Website erhält, sollte Barrierefreiheit als Teil des Basispakets bekommen — sie ist eine Frage der sauberen Umsetzung, nicht ein Zusatzmodul. Bei bestehenden Websites hängt der Aufwand stark vom Ist-Zustand ab: Von wenigen Stunden (nur Kontraste und Alt-Texte) bis zu kompletten Relaunches (verschachtelte div-Strukturen, inaktive Tastatur-Navigation, fehlende Labels überall).

Bei uns ist BFSG-konforme Umsetzung Teil des Standards, nicht Aufpreis. Mehr dazu auf Leistungen.

Bußgelder

Verstöße können mit bis zu 100.000 € geahndet werden. Praktisch kommt das eher bei großen Anbietern vor — Abmahnungen durch Mitbewerber oder Verbände sind für KMU das realistischere Risiko. Aber: Wer BFSG-konform ist, hat auch weniger Rechtsrisiko in anderen Bereichen (UWG, DSGVO), weil saubere Webseiten weniger Angriffsfläche bieten.