Sie nutzen gerne Animationen auf Ihrer Website, etwa um Abläufe, Softwarefunktionen oder technische Zusammenhänge zu veranschaulichen? Dann sollten Sie unbedingt sicherstellen, dass diese Animationen auch barrierefrei sind.
In diesem Beitrag stelle ich Ihnen eine Web-Komponente vor, die genau das ermöglicht: eine pausierbare, per Tastatur steuerbare und WCAG-konforme Animation. Sie können sie direkt auf CodePen ansehen, kopieren und in Ihre Website einbauen.
Warum barrierefreie Animationen wichtig sind
So hilfreich Animationen für die visuelle Kommunikation sind, für manche Menschen sind sie belastend. Gerade bei automatisch ablaufenden Bewegungen sind diese Effekte keine Seltenheit:
- Konzentrationsprobleme
- Schwindel und Übelkeit
- Verlust der Orientierung
- Ablenkung und Reizüberflutung
Aus Sicht der Barrierefreiheit ist das ein Problem, und die WCAG-Kriterien adressieren es ganz konkret.
Autoplay-Animationen, die länger als 5 Sekunden laufen, müssen pausierbar sein.
WCAG 2.2, Kriterium 2.2.2 Pause, Stop, Hide
Was die Richtlinien sagen und was das für Sie bedeutet
Nach den WCAG und dem seit Juni 2025 geltenden Barrierefreiheitsstärkungsgesetz (BFSG) gilt: Animationen, die automatisch starten und länger als 5 Sekunden laufen, müssen pausierbar sein. Betroffen sind unter anderem diese Kriterien:
- 1.2.1 Audio-only and Video-only (Prerecorded)
- 2.1.1 Keyboard
- 2.2.2 Pause, Stop, Hide
- 4.1.2 Name, Role, Value
Die gute Nachricht: Sie müssen das Rad nicht neu erfinden. Ich habe bereits eine fertige Lösung entwickelt.
Die Komponente: direkt testbar und kopierbar
Die Komponente arbeitet mit dem <video>-Tag und erfüllt alle Anforderungen für Animationen, die als MP4 eingebunden sind. Sie
- lässt sich jederzeit pausieren und fortsetzen,
- ist vollständig mit der Tastatur bedienbar,
- lässt sich leicht in bestehende Seiten integrieren,
- unterstützt Screenreader durch klare Rollen und Attribute,
- respektiert die Einstellung
prefers-reduced-motion.
Sehen Sie sich den Pen A11y mp4 video animation von SKA Pixels, Sebastian Kaiser (@ska-pixels) direkt auf CodePen an.
Nach demselben Prinzip funktionieren übrigens auch die Video-Kacheln hier auf meiner Website: Sie starten nur, wenn keine reduzierte Bewegung eingestellt ist, und lassen sich jederzeit per Knopf anhalten.
Sie möchten wissen, ob die Animationen und Videos auf Ihrer Website die Anforderungen erfüllen? Das prüfe ich in einem Accessibility-Audit. Schreiben Sie mir.
