1. Was ist das Ziel dieses Kriteriums?
Animationen sind wie Glitzer in der digitalen Welt – sie sehen toll aus, können aber auch ordentlich in die Augen stechen. Während sich die meisten über schicke Parallax-Effekte und sanfte Übergänge freuen, gibt es Menschen, die buchstäblich davon krank werden. Schwindel, Übelkeit und Kopfschmerzen sind nur einige der Reaktionen, die übermäßige Bewegung auf dem Bildschirm auslösen kann.
Das Ziel von Erfolgskriterium 2.3.3 der WCAG ist daher klar: Menschen sollen die Kontrolle über Animationen haben, die durch ihre Interaktionen ausgelöst werden. Wer betroffen ist, sollte diese Bewegungen abschalten können – außer sie sind wirklich notwendig für die Funktionalität.
2. Was fordert das Erfolgskriterium genau?
Ganz konkret geht es um "Motion Animation" – also Bewegungsanimationen, die durch Nutzerinteraktionen ausgelöst werden. Das können Scroll-Effekte sein, Parallax-Animationen oder fancy Seitenübergänge.
Die Anforderung auf Level AAA ist eindeutig:
Alle durch Interaktion ausgelöste Bewegungsanimationen müssen abschaltbar sein – es sei denn, sie sind essentiell für die Funktionalität oder die vermittelte Information.
Was bedeutet das konkret?
- Parallax-Scrolling: Wenn beim Scrollen Hintergrundelemente sich anders bewegen als der Vordergrund – muss abschaltbar sein
- Fancy Seitenübergänge: Aufwendige Fade-In/Out-Effekte zwischen Seiten – muss abschaltbar sein
- Hover-Animationen: Übertriebene Bewegungseffekte bei Mouse-Over – muss abschaltbar sein
- Scroll-Triggered-Animationen: Elemente, die beim Scrollen ins Bild fliegen – muss abschaltbar sein
Ausnahmen gelten nur dann, wenn die Animation selbst die Information ist – wie bei einem Animations-Editor, wo die Vorschau der Animation essentiell ist.
3. Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du willst eine Website besuchen, aber jedes Mal wenn du scrollst, tanzen die Elemente Salsa und dir wird so schwindelig, dass du den Computer ausschalten musst. Genau so geht es Menschen mit Vestibularstörungen (Gleichgewichtsstörungen).
Kontrollierbare Animationen schaffen Barrierefreiheit, weil sie:
- Menschen mit Vestibularstörungen vor Schwindel, Übelkeit und Kopfschmerzen schützen
- Menschen mit Aufmerksamkeitsstörungen helfen, sich auf den Inhalt zu konzentrieren
- Menschen mit kognitiven Einschränkungen weniger Ablenkung bieten
- Alle Nutzer eine entspanntere Browsing-Erfahrung ermöglichen
Die Auswirkungen können dabei richtig heftig sein: Manche Betroffene brauchen nach zu viel Bewegung auf dem Bildschirm Bettruhe, um sich zu erholen. Das ist kein Luxusproblem, sondern ein echtes Gesundheitsrisiko.
4. So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Du musst nicht auf alle Animationen verzichten – du musst nur sicherstellen, dass Nutzer sie abschalten können. Hier drei bewährte Ansätze:
Option 1: Globaler Schalter
- Biete eine sichtbare Einstellung "Animationen reduzieren" oder "Bewegungen abschalten"
- Diese sollte idealerweise oben auf jeder Seite oder im Hauptmenü zu finden sein
- Die Einstellung sollte seitenweit gelten und gespeichert werden
Option 2: CSS prefers-reduced-motion nutzen
- Verwende die CSS Media Query
@media (prefers-reduced-motion: reduce) - Diese respektiert die Systemeinstellungen des Nutzers automatisch
- Moderne Browser und Betriebssysteme unterstützen diese Präferenz bereits
Option 3: Komplett vermeiden
- Verzichte auf nicht-essentielle Bewegungsanimationen
- Setze stattdessen auf statische Übergänge oder einfache Fade-Effekte
- Das ist oft die einfachste und sicherste Lösung
Praktische Umsetzung:
/* Animationen standardmäßig an */
.animated-element {
transition: transform 0.3s ease;
}
/* Animationen für Nutzer mit reduce-motion-Präferenz aus */
@media (prefers-reduced-motion: reduce) {
.animated-element {
transition: none;
}
}Was du vermeiden solltest:
- Parallax-Effekte ohne Abschaltmöglichkeit
- Excessive Scroll-Animationen ohne Kontrolle
- Bewegungsreiche Übergänge als Standard ohne Alternative
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Auch bei Erfolgskriterium 2.3.3 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.
1. Zielgruppe erweitern
Menschen mit Vestibularstörungen sind häufiger als du denkst – bis zu 35% der Erwachsenen über 40 haben entsprechende Probleme. Mit kontrollierbaren Animationen machst du deine Website für diese große Nutzergruppe zugänglich und zeigst Verantwortung.
2. Performance und Nutzererfahrung verbessern
Weniger Animationen bedeuten oft bessere Performance – gerade auf mobilen Geräten und langsameren Verbindungen. Nutzer schätzen es, wenn sie selbst entscheiden können, wie viel "Bewegung" sie wollen.
3. Moderne Standards einhalten
Die prefers-reduced-motion Media Query ist ein moderner Web-Standard, den viele Nutzer bereits in ihren Systemeinstellungen aktiviert haben. Wer diesen Standard ignoriert, wirkt technisch rückständig.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
6. Das Erfolgskriterium im Wortlaut der W3C
Success Criterion 2.3.3 Animation from Interactions (Level AAA)
Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.