Webdesign
BFSG 2026: Barrierefreiheit für Websites — die konkrete Checkliste
Seit 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Viele Website-Betreiber wissen, dass es „irgendwas mit Barrierefreiheit“ gibt, aber nicht, was sie konkret tun müssen. Dieser Artikel bringt Klarheit: wer betroffen ist, welche Anforderungen wirklich gelten, und eine konkrete Checkliste — mit den technischen Punkten, die 90 % der Websites gerade nicht erfüllen.
Was das BFSG ist — kurz und ehrlich
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Umsetzung der EU-Richtlinie 2019/882 (European Accessibility Act). Es verpflichtet Anbieter bestimmter Produkte und Dienstleistungen, ihre digitalen Angebote barrierefrei zugänglich zu machen. Für Websites heißt das konkret: sie müssen den Standard WCAG 2.1 Level AA erfüllen.
In Kraft seit 28. Juni 2025. Keine Übergangsfrist für Bestandsseiten. Und ja, viele Websites sind aktuell nicht konform — die meisten Betreiber wissen es nicht.
Bist du betroffen? Der Entscheidungsbaum
Drei Fragen, in dieser Reihenfolge:
- Verkaufst du an Verbraucher (B2C)? Reine B2B-Anbieter sind ausgenommen. Aber „auch B2C“ reicht — sobald ein Endkunde etwas kaufen oder buchen kann, gilt B2C.
- Bist du Kleinstunternehmen? Weniger als 10 Mitarbeiter UND weniger als 2 Mio € Jahresumsatz. Wenn ja, bist du für Dienstleistungen ausgenommen (nicht aber für Produkte).
- Ist deine Website die Vertriebsplattform? Wenn Kunden über die Website Termine buchen, Produkte kaufen, Dienstleistungen bestellen — dann fällt die Website unter das BFSG.
Klassische Fälle, die betroffen sind: Reisebüros mit IBE-Buchung, Coaches mit Termin-Buchungssystem, Shops jeder Art, Restaurants mit Online-Reservierung, Handwerksbetriebe mit Online-Formularanfrage (Grauzone — im Zweifel: ja).
Klassische Fälle, die nicht betroffen sind: reine Info-Website eines B2B-Beraters ohne Kaufmöglichkeit, private Blogs, Vereine ohne kommerzielle Aktivität.
Die konkrete Checkliste — was WCAG 2.1 AA verlangt
WCAG hat vier Prinzipien und rund 50 messbare Erfolgskriterien. Hier die Punkte, die 90 % der Websites nicht erfüllen — und die entsprechend am häufigsten abgemahnt werden:
Wahrnehmbar
- Alt-Texte für alle inhaltsrelevanten Bilder. Nicht „Bild 1“ oder „logo.jpg“, sondern beschreibender Text. Dekorative Bilder mit leerem alt="" versehen.
- Farbkontrast mindestens 4,5:1 für normalen Text. 3:1 für großen Text (ab 24 px oder 18 px Bold). Feine Auszeichnungen unter 4,5:1 sind Verletzung.
- Text-Größe skalierbar bis 200 % ohne Layout-Bruch. Meist erfüllt, aber häufig scheitern feste Container-Höhen daran.
- Nicht nur Farbe als Bedeutungsträger. Rote Fehlermeldungen brauchen auch ein Symbol oder Text-Prefix („Fehler:“).
- Semantische HTML-Struktur. H1 einmal pro Seite, H2/H3 in Reihenfolge, main/nav/footer-Elemente sinnvoll gesetzt.
Bedienbar
- Vollständige Tastatur-Bedienung. Jeder Link, jeder Button, jedes Formularfeld muss per Tab erreichbar sein. Kein Element darf nur mit Maus bedienbar sein.
- Sichtbarer Fokus-Indikator. Wenn du mit Tab navigierst, muss sichtbar sein, wo du gerade bist. Häufigster Verstoß: Fokus-Ring per CSS ausgeblendet („sieht besser aus“ — ist aber Verletzung).
- Skip-Link zum Hauptinhalt. „Zum Inhalt springen“-Link am Seitenanfang, damit Screenreader-Nutzer nicht durch die ganze Navigation müssen.
- Keine Zeitlimits ohne Verlängerungsmöglichkeit. Session-Timeout okay, aber muss verlängerbar sein.
- Keine blinkenden Inhalte über 3 Hz. Praktisch nie ein Problem, aber Blinklichter in Animationen prüfen.
Verständlich
- Sprachattribut im HTML. <html lang="de"> — häufigster übersehener Punkt bei internationalen Templates.
- Konsistente Navigation. Wenn Menü, Suche und Login auf jeder Seite unterschiedlich positioniert sind, ist das Verletzung.
- Formularfehler klar beschrieben. Nicht nur „Feld ungültig“, sondern „E-Mail-Format ist ungültig — bitte format@beispiel.de“.
- Formularfelder mit Label. Jedes <input> braucht ein zugeordnetes <label>. Placeholder-Text ersetzt kein Label.
Robust
- Valides HTML. Keine doppelten IDs, keine unclosed Tags, keine falsch verschachtelten Elemente.
- ARIA korrekt eingesetzt. Wenn du ARIA-Attribute nutzt, müssen sie mit korrekter Semantik übereinstimmen. Falsche ARIA ist schlimmer als keine ARIA.
Praxis-Tipp: Der schnellste Selbsttest: navigiere deine Website nur mit der Tab-Taste. Wenn du irgendwo hängen bleibst, den Fokus verlierst oder auf ein Element kommst, das nichts macht — hast du Verletzungen. Zweiter Test: pass die Browser-Textgröße auf 200 %. Wenn Buttons abgeschnitten oder Layout bricht — Verletzung.
Die häufigsten Verstöße in der Praxis
Wenn wir Bestandsseiten für BFSG-Nachbesserung analysieren, sind das die Top 10 der Probleme:
- Kein sichtbarer Fokus-Ring (per CSS ausgeblendet).
- Bilder ohne Alt-Text oder mit generischem „image1.jpg“ als Alt.
- Farbkontrast bei Fließtext oder Buttons unter 4,5:1.
- Keine H1 auf Unterseiten oder mehrere H1 pro Seite.
- Formular-Placeholder statt Label.
- Menü-Buttons nur mit Icon (kein Text, kein aria-label).
- Kein Skip-Link.
- Video ohne Untertitel.
- Fehlende Barrierefreiheitserklärung.
- PDF-Dokumente nicht barrierefrei (Skalen-Anhang oder AGB als PDF).
Was du jetzt konkret tun solltest
Schritt 1: Betroffenheit prüfen
Klär die drei Fragen aus dem Entscheidungsbaum. Wenn du unsicher bist: im Zweifel gehst du davon aus, dass du betroffen bist. Die Grauzone ist groß und die Klärung durch Abmahnung ist teuer.
Schritt 2: Ist-Analyse
Führe einen automatischen Test durch (z. B. WAVE, axe DevTools, Lighthouse). Diese finden 30–40 % der Verstöße. Für die restlichen 60 % brauchst du einen manuellen Audit oder eine spezialisierte Agentur.
Schritt 3: Priorität setzen
Nicht alles auf einmal. Reihenfolge nach Impact:
- Sichtbarer Fokus, Tastatur-Bedienbarkeit, Skip-Link (sofort für Screenreader-Nutzer wirksam).
- Alt-Texte, Farbkontrast (breite Wirkung).
- Semantische Struktur, ARIA (Detail-Verbesserungen).
- Barrierefreiheitserklärung veröffentlichen.
Schritt 4: Umsetzen
Bei kleinen Websites: 5–15 Stunden Aufwand für einen Techniker. Bei komplexen Sites mit vielen individuellen Komponenten: 30–80 Stunden. Kosten typisch 1.500–8.000 €.
Schritt 5: Barrierefreiheitserklärung
Muss auf der Website erreichbar sein (meist im Footer). Enthält: Konformitätsstand (voll / teilweise / nicht), Ausnahmen mit Begründung, Kontakt für Feedback, Datum der Erklärung.
Was wir konkret machen
Alle Websites, die wir bauen, sind von Anfang an nach WCAG 2.1 AA gebaut. Das ist Teil unseres Festpreises — kein Aufpreis, kein Nachbesserungs-Verzug. Konkret:
- Semantisches HTML als Grundlage (Next.js macht das ordentlich).
- Farbkontraste per Design-System sichergestellt.
- Alt-Texte konsequent geführt.
- Tastatur-Navigation als Grundzustand, nicht als Nachgedanke.
- Automatisierte Tests im Build-Prozess (axe-core-Prüfungen).
- Manueller Audit vor Launch.
- Barrierefreiheitserklärung generiert.
Wenn du eine Bestands-Website hast und wissen willst, wie fit sie ist: wir machen einen kurzen Check kostenlos im Erstgespräch — mit konkreter Einschätzung, ob und wie viel Aufwand nötig wäre. Ehrlich, ohne Verkaufsdruck.
Der nächste Schritt
Wenn du unsicher bist, ob deine Website BFSG-konform ist, sprechen wir 30 Minuten unverbindlich. Du bekommst einen konkreten Ist-Stand und, falls nötig, einen realistischen Nachbesserungs-Aufwand. Termin buchen — oder gleich eine neue Website planen, die von Anfang an konform ist.
Häufige Fragen
In 30 Minuten klären wir, was deine Website braucht.
Kostenloses Erstgespräch — Festpreis danach, kein offenes Ende. Antwort innerhalb von 24 Stunden.