Barrierefreie GIFs: WCAG, Alt-Text und Pause-Regeln

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), das die Anforderungen der europäischen Richtlinie EU 2019/882 in nationales Recht umsetzt. Für viele Websites bedeutet das: WCAG 2.2 ist nicht mehr “nice to have”, sondern für kommerzielle Anbieter verpflichtend. Animierte GIFs sind davon direkt betroffen.

Was die WCAG 2.2 von Animationen fordert

WCAG 2.2 hat fünf Erfolgskriterien, die bei animierten Inhalten greifen:

• 2.2.2 Pause, Stop, Hide (Level A): Bewegung, die länger als 5 Sekunden dauert und parallel zu anderen Inhalten läuft, muss pausierbar oder versteckbar sein.
• 2.3.1 Three Flashes or Below Threshold (Level A): keine Animation mit mehr als drei Blitzen pro Sekunde im flackernden Bereich (Schutz vor photosensitiven Anfällen).
• 2.3.3 Animation from Interactions (Level AAA): nicht-essentielle Animationen sollen deaktivierbar sein.
• 1.4.3 Contrast (Minimum) (Level AA): 4,5:1 zwischen Text und Hintergrund (gilt auch für Text in animierten GIFs).
• 1.1.1 Non-text Content (Level A): alle nicht-textuellen Inhalte brauchen eine Text-Alternative.

Die Konsequenz: GIFs sind nicht automatisch barrierefrei, nur weil sie funktionieren. Die häufigsten Fehler sind technisch lösbar.

Alt-Text als Pflicht

Jedes GIF in einer Webseite oder einem Newsletter braucht ein alt-Attribut oder eine textuelle Beschreibung. Drei Fälle:

1. Dekoratives GIF ohne Inhalt: alt="" (leere Alt-Text-Klammer). Screen-Reader überspringen es.
2. GIF zeigt einen Vorgang oder eine Information: alt beschreibt was passiert, nicht wie es aussieht. Beispiel: alt="Beispiel-Workflow: Datei in das Tool ziehen, Qualität wählen, Download klicken".
3. GIF mit Text im Bild: Text muss im Alt enthalten sein oder im umgebenden Markup wiederholt sein. Sonst ist die Information für Screen-Reader unsichtbar.

Bei mp4webm.de empfehlen wir: schreib den Alt-Text in einem Satz, der das Ergebnis der Animation zusammenfasst. Wer die Animation nicht sehen kann, bekommt die gleiche Information.

Pause-Mechanismus über 5 Sekunden

WCAG 2.2.2 fordert eine Pause-Möglichkeit, wenn die Animation länger als 5 Sekunden ist und andere Inhalte um sie herum stehen. Praxis-Implikationen:

• Newsletter-Hero über 5 Sekunden: kritisch. E-Mail-Clients erlauben kein JavaScript für Pause-Buttons. Lösung: GIF unter 5 Sekunden halten oder als Vorschau-Bild mit Link auf eine Web-Version anbieten, wo Pause möglich ist.
• Website-Hero über 5 Sekunden: Pause-Button neben dem GIF oder ein Klick-zum-Stoppen-Mechanismus. Das prefers-reduced-motion-Media-Query sollte das GIF durch ein statisches Bild ersetzen.
• Slack-GIF: meist unter 5 Sekunden, daher unkritisch. Slack hat keinen Pause-Mechanismus.

Die einfachste Lösung ist oft, GIFs unter 5 Sekunden zu halten. Das ist nicht nur barrierefreier, sondern auch dramaturgisch besser.

prefers-reduced-motion respektieren

Moderne Betriebssysteme erlauben Nutzer:innen, reduzierte Bewegung systemweit zu aktivieren. Browser respektieren das über das CSS Media-Query prefers-reduced-motion. Animierte GIFs sollten auf dieses Signal reagieren:

@media (prefers-reduced-motion: reduce) {
  .hero-gif {
    display: none;
  }
  .hero-fallback {
    display: block;
  }
}

Auf der HTML-Seite wird neben dem GIF ein statisches Bild eingebettet. Wer reduzierte Bewegung aktiviert hat, sieht den Standbild-Fallback. Das ist in 5 Minuten umgesetzt und vermeidet rechtliche Risiken.

Kontrast in animierten GIFs

WCAG 1.4.3 fordert 4,5:1 Kontrast für normalen Text und 3:1 für großen Text (ab 24 px oder 18 px bold). Bei animierten GIFs ist das oft übersehen, weil:

• der Text während der Animation temporär auf einem hellen Hintergrund landet
• die GIF-Palette (oft 128 Farben) den Kontrast leicht verändert
• Dither den Text “weichzeichnen” kann, was bei kleinen Schriftgrößen den Kontrast effektiv senkt

Praxis: nach der Konvertierung den kritischen Frame screenshotten und durch einen Kontrast-Checker jagen (WebAIM, Colour Contrast Analyser). Wenn der Kontrast knapp ist, hilft eine dunklere Hintergrund-Schicht im Originalvideo oder größerer Schrift.

Praktisch: Checkliste vor Veröffentlichung

Vor jedem Marketing-GIF:

• Alt-Text ist gesetzt und beschreibt den Inhalt, nicht das Aussehen
• Animation ist unter 5 Sekunden ODER es gibt eine Pause-Möglichkeit
• Erster Frame ergibt als Standbild Sinn
• prefers-reduced-motion-Fallback ist eingebaut (auf Website)
• Text im GIF hat Kontrast >= 4,5:1 zum Hintergrund
• Kein Flackern über 3 Blitze pro Sekunde
• Animation ist nicht essenziell (Information ist auch ohne sie verfügbar)

BFSG-Implikationen für kommerzielle Anbieter

Das BFSG gilt seit dem 28.06.2025 für:

• B2C-Onlineshops und E-Commerce-Plattformen
• Bank- und Finanzdienstleistungen
• Verkehrs-Apps (DB, OePNV)
• Telekommunikations-Anbieter
• elektronische Bücher und Software
• Privatpersonen und reine B2B-Anbieter sind noch ausgenommen, aber die Tendenz zur Ausweitung ist klar

Bei Verstoss drohen Bußgelder, in schweren Fällen Vertriebsverbote. Wer GIFs in einem BFSG-pflichtigen Angebot einsetzt, muss die WCAG-Kriterien einhalten. Die Prüfung erfolgt durch die Marktüberwachungsbehörde der Länder.

Praktisch gesehen: die Aufwand-zu-Risiko-Relation spricht klar für disziplinierte GIF-Nutzung statt Verzicht. Mit Alt-Text, 5-Sekunden-Grenze und Reduced-Motion-Fallback ist man auf der sicheren Seite. mp4webm.de produziert GIFs in den Parametern, die diese Anforderungen unterstützen, aber die Einbindung in HTML und E-Mail liegt am Ende beim Anwender.