BFSG — was sich 2025 geändert hat

Am 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland in Kraft getreten. Es setzt den European Accessibility Act in nationales Recht um und verpflichtet eine breite Auswahl an Webseiten und Apps zu Barrierefreiheit. Pflicht-Standard: WCAG 2.2 Level AA.

Direkt betroffen: E-Commerce-Sites, Bank- und Zahlungsdienste, E-Books, Streaming- Plattformen, Telefon-Dienste, Reise-Buchungen, alle Apps. Kleinst-Unternehmen (<10 Mitarbeiter, <2 Mio € Umsatz) sind ausgenommen — aber freiwilliges BFSG-Niveau ist auch dort empfehlenswert.

Die zwei zentralen WCAG-Regeln für Bilder

WCAG 2.2 nennt zwei Erfolgskriterien, die Bilder direkt betreffen:

  • 1.1.1 Non-text Content (Level A): Jedes Nicht-Text-Element braucht eine textuelle Alternative, die den gleichen Zweck erfüllt.
  • 1.4.5 Images of Text (Level AA): Text in Bildern vermeiden, außer bei Logos oder wenn Text-Bilder essentiell sind.

alt-Text richtig schreiben

Eine knappe Erinnerung an die Grundregel (mehr im Lexikon-Eintrag): alt-Text ist keinBildunterschrift-Ersatz, sondern eine textuelle Alternative für Menschen, die das Bild nicht sehen können. Vier Klassifikationen:

Inhalts-Bilder

Bilder, die Information transportieren. Alt-Text Pflicht: die Information in Worten ausdrücken, knapp und sachlich.

Beispiel: ein Foto vom neuen Produkt eines Shops. Schlecht: alt="Bild Produkt". Mittel: alt="Schwarze Sneakers Modell Olympia, Seitenansicht". Gut: alt="Schwarze Low-Top-Sneakers mit weißer Sohle und gelbem Olympia-Logo am Ferse, Seitenansicht".

Dekorative Bilder

Bilder, die nur Layout und Atmosphäre verstärken, ohne Information. Pflicht alt="" (leer). Screen-Reader überspringen sie dann komplett — richtig.

Beispiel: ein Background-Foto unter einer Hero-Section, das nur Stimmung erzeugt. Mitalt="" markieren, nicht weglassen — sonst liest der Screen- Reader den Dateinamen vor.

Funktionale Bilder

Bilder als Buttons oder Links (Lupen-Icon für Suche, Warenkorb-Icon). Alt-Text beschreibt die Funktion, nicht das Bild.

Beispiel: ein Warenkorb-Icon-Button. Schlecht: alt="Warenkorb-Symbol". Gut: alt="Warenkorb öffnen".

Komplexe Bilder (Charts, Diagramme, Karten)

Wenn die Information komplex ist, reicht ein kurzer alt-Text nicht. Drei Optionen:

  • aria-describedby + längere Beschreibung. Der alt-Text ist kurz, verweist auf eine ausführliche Beschreibung, die als sichtbarer oder per CSS ausgeblendeter Text auf der Seite steht.
  • figcaption mit ausführlicher Beschreibung. Eine<figure>-Struktur mit Bild und ausführlicher<figcaption>.
  • Daten-Tabelle parallel. Bei Diagrammen: das Diagramm zeigen plus die zugrundeliegende Daten-Tabelle. Screen-Reader nutzt die Tabelle, sehende Nutzer das Diagramm.

SVG-Icons barrierefrei einbinden

SVG-Inline-Icons brauchen besonderes Markup:

<!-- Dekorativ: aria-hidden -->
<svg aria-hidden="true" focusable="false">…</svg>

<!-- Informativ: title + role -->
<svg role="img" aria-labelledby="warn-title">
  <title id="warn-title">Warnung</title>
  …
</svg>

<!-- Funktional in Button: aria-label auf dem Button -->
<button aria-label="Warenkorb öffnen">
  <svg aria-hidden="true">…</svg>
</button>

Text in Bildern vermeiden

WCAG 1.4.5 verlangt: Text nicht in Bilder einbacken. Gründe:

  • Screen-Reader können den Text nicht lesen (auch nicht via OCR).
  • Bei Zoom skaliert der Text unscharf — echter HTML-Text bleibt scharf.
  • Übersetzungen erfordern neue Bilder pro Sprache.

Ausnahmen: Logos und Marken-Texte (essenziell für die Marken-Identität), kurz eingebundene Text-Bilder, die sich nicht durch Layout-CSS ersetzen lassen.

Praxis-Tipp: ein „Sale 50 %"-Banner besser per CSS über das Foto legen als ins JPG backen.

Kontrast und Lesbarkeit

Wenn Text auf einem Hintergrund-Bild liegt, gilt WCAG 1.4.3 (Kontrast):

  • Normal-Text: mindestens 4,5:1 Kontrast-Verhältnis.
  • Großer Text (18 pt oder 14 pt fett): mindestens 3:1.

Bei Foto-Hintergründen: dunklen Overlay (rgba(0,0,0,0.5)) zwischen Foto und Text legen oder Foto stark abdunkeln. Tools wie das WebAIM Contrast Checkermessen das automatisch.

Animationen und prefers-reduced-motion

WCAG 2.2.2 verlangt: Animationen länger als 5 Sekunden müssen pausierbar sein. WCAG 2.3.3 (Level AAA): bewegte Inhalte müssen prefers-reduced-motion respektieren. Mehr dazu in unserem Web-Animations-Beitrag.

Captions und Audio-Beschreibungen für Video

Video als „bewegtes Bild" hat zusätzliche Pflichten:

  • 1.2.2 Captions (Level A): Untertitel für alle Audio-Inhalte in Videos.
  • 1.2.3 Audio Description (Level A): Bei Videos mit visuellen Informationen, die nicht im Audio erklärt werden, braucht es eine Audio-Beschreibung zwischen den Original-Dialogen oder als alternative Spur.

Tools und Audit-Workflow

  • axe DevTools (Chrome-Extension). Auto-Scan einer Seite auf WCAG-Verstöße, inklusive Bild-Pflichten.
  • Lighthouse Accessibility-Audit. In Chrome DevTools integriert, macht einen Schnell-Check.
  • NVDA-Screen-Reader (Windows, kostenlos). Tatsächlich mit einem Screen-Reader testen, nicht nur Auto-Audits.
  • VoiceOver (macOS, eingebaut). Apple-Equivalent.
  • BFSG-konforme Erklärung der Barrierefreiheit. Pflicht für alle BFSG-betroffenen Sites; mindestens jährlich aktualisieren.

Häufige Fehler 2026

  • alt-Text mit „Bild von …". Screen-Reader sagt schon „Image", das wiederholt nur unnötig.
  • SEO-Keywords im alt-Text. Nicht hilfreich für Screen-Reader, schadet seit 2023 auch SEO.
  • Identische alt-Texte bei mehreren Bildern. „Produktbild" als alt für 30 Produkt-Fotos macht den Screen-Reader nutzlos.
  • Dekorations-Bild ohne alt-Attribut. Browser interpretiert das als „kein Wert" — Screen-Reader liest den Dateinamen.
  • Komplexe Charts mit nur kurzem alt-Text."Verkaufschart Q3" sagt nichts über die Daten.

Rechtliche Konsequenzen

BFSG-Verstöße können seit Juni 2025 mit Bußgeldern bis 100 000 € (BFSG § 37) belegt werden. Praktisch passieren Sanktionen meist nach Beschwerden bei der Marktüberwachungs-Behörde (in DE die BAFA). Wichtiger als die Bußgeld-Drohung: Verbraucher-Vertrauen und der von Mitbewerbern beobachtete Markt-Druck. Wer barrierefrei ist, profitiert von einem ~15 % größeren erreichbaren Publikum (Anteil der Menschen mit Behinderung).

Quellen

W3C WCAG 2.2 Recommendation · BFSG — Barrierefreiheitsstärkungsgesetz · EU-Richtlinie 2019/882 (European Accessibility Act) · W3C WAI — Image Tutorial · WebAIM Contrast Checker · axe DevTools (Deque) · NVDA Screen Reader · Bundesfachstelle für Barrierefreiheit.