WCAG 2.3.3: Animationen aus Interaktionen

WCAG 2.3.3 verlangt, dass durch Benutzerinteraktion ausgelöste Bewegungsanimationen deaktiviert werden können, es sei denn, die Animation ist für die Funktionalität oder die zu vermittelnden Informationen wesentlich. Dies ist wichtig, weil Bewegung vestibuläre Störungen auslösen kann, die bei einem erheblichen Teil der Bevölkerung Schwindel, Übelkeit und Desorientierung verursachen.

Was diese Regel bedeutet

WCAG 2.3.3 — Animation aus Interaktionen ist ein Kriterium der Stufe AAA unter dem Prinzip Bedienbarkeit. Es verlangt, dass jede Bewegungsanimation, die durch Interaktion ausgelöst wird, von den Nutzern deaktiviert werden kann, es sei denn, diese Animation ist für die Funktionalität oder die zu vermittelnden Informationen wesentlich. Das Kriterium gilt für Animationen, die durch Nutzeraktionen wie Klicken, Scrollen, Hover, Fokussieren oder jede andere Form der Interaktion ausgelöst werden — nicht für Animationen, die automatisch beim Laden der Seite abgespielt werden (die möglicherweise durch andere Kriterien wie 2.2.2 Anhalten, Beenden, Ausblenden geregelt sind).

Der zentrale Begriff ist hier Bewegungsanimation. Dazu gehören Parallax-Scroll-Effekte, Seitenübergangsanimationen, gleitende oder heranzoomende Elemente, rotierende Indikatoren und jede andere Bewegung, die als direkte Folge einer Nutzeraktion auftritt. Nicht erfasst sind einfache Opazitätsüberblendungen oder Farbänderungen, da diese keine räumliche Bewegung beinhalten, die vestibuläre Reaktionen auslösen kann. Die Unterscheidung liegt zwischen Bewegung im Raum (die Schaden verursachen kann) und Änderungen im Erscheinungsbild ohne räumliche Verschiebung (die dies im Allgemeinen nicht können).

Ein Bestehen setzt voraus, dass Nutzende über einen verlässlichen Mechanismus verfügen, um solche Animationen auszuschalten, ohne den Zugang zu denselben Inhalten oder Funktionen zu verlieren. Die am weitesten akzeptierte Technik ist die Beachtung der Betriebssystemeinstellung über die prefers-reduced-motion-Media-Query, die die Systempräferenz der Nutzer zur Reduzierung von Bewegung widerspiegelt. Alternativ kann ein deutlich platzierter, seitenspezifischer Schalter in der Oberfläche — etwa in einem Einstellungsbereich oder einem Barrierefreiheits-Widget — das Kriterium erfüllen, sofern er sitzungsübergreifend bestehen bleibt und leicht zu finden ist.

Die Ausnahme für wesentliche Animationen ist eng gefasst: Eine Animation ist nur dann wesentlich, wenn ihre Entfernung die Information oder Funktionalität grundlegend verändern würde und keine gleichwertige, nicht animierte Alternative existiert. Ein rotierender Ladeindikator, der der einzige visuelle Hinweis darauf ist, dass Inhalte geladen werden, könnte darunter fallen; ein dekoratives Parallax-Hintergrundbild, das sich beim Scrollen bewegt, fällt nicht darunter, selbst wenn es ästhetisch zentral für das Design ist.

Das Kriterium verlangt nicht, dass Animationen vollständig entfernt werden — nur, dass ein Mechanismus zu ihrer Deaktivierung existiert. Wenn der Mechanismus aktiviert ist, müssen Inhalte weiterhin vollständig zugänglich sein, das heißt, eine nicht animierte Alternative muss dieselben Informationen liefern oder dieselbe Funktion erfüllen.

Warum es wichtig ist

Vestibuläre Störungen — Erkrankungen des Innenohrs und des Gehirns, die Gleichgewicht und Augenbewegung steuern — betreffen einen erheblichen Teil der Weltbevölkerung. Laut der Vestibular Disorders Association haben in den Vereinigten Staaten etwa 35% der Erwachsenen ab 40 Jahren irgendeine Form vestibulärer Funktionsstörung erlebt. Weltweit betreffen Erkrankungen wie benigner paroxysmaler Lagerungsschwindel (BPPV), Morbus Ménière und vestibuläre Migräne Dutzende Millionen Menschen. Für diese Personen kann Bewegung auf einem Bildschirm unmittelbare körperliche Symptome auslösen, darunter Schwindel, Vertigo, Übelkeit, Kopfschmerzen und in schweren Fällen vorübergehende Handlungsunfähigkeit.

Stellen Sie sich eine Nutzerin mit vestibulärer Migräne vor, die eine Reisebuchungs-Website besucht. Die Seite verwendet einen ganzseitigen Parallax-Scroll-Effekt, bei dem sich das Hero-Bild mit einer anderen Geschwindigkeit bewegt als der Seiteninhalt, während die Nutzerin scrollt. Innerhalb weniger Sekunden nach Beginn des Scrollens erlebt sie starken Schwindel und Übelkeit. Sie kann die Buchung nicht abschließen und muss die Seite vollständig verlassen — nicht wegen einer kognitiven Barriere oder einer motorischen Beeinträchtigung, sondern aufgrund einer körperlichen Reaktion auf die Bewegung auf dem Bildschirm. Dies ist der reale Schaden, den WCAG 2.3.3 verhindern soll.

Über vestibuläre Störungen hinaus können Bewegungsanimationen Nutzende mit Aufmerksamkeitsdefizitstörungen negativ beeinflussen, die anhaltende oder ausgelöste Bewegung als ablenkend empfinden und nur schwer ignorieren können, sowie Nutzende mit Angststörungen, für die unerwartete Bewegung belastend sein kann. Menschen, die sich von Gehirnerschütterungen oder traumatischen Hirnverletzungen erholen, sind ebenfalls hochsensibel für visuelle Bewegung. Selbst Nutzende ohne diagnostizierte Erkrankung können starke Animationen bei längeren Sitzungen als ermüdend empfinden.

Aus Nutzungs- und Geschäftsperspektive korreliert die Beachtung von Präferenzen für reduzierte Bewegung mit verbesserten Aufgabenerfolgsraten und längerer Sitzungsdauer bei sensiblen Nutzenden. Die Beachtung von Systemeinstellungen signalisiert zudem, dass ein Produkt technisch ausgereift ist und den Bedürfnissen der Nutzenden Aufmerksamkeit schenkt, was Vertrauen aufbaut. Im E-Commerce, wo Warenkorbabbrüche aufgrund schlechter Nutzererfahrung direkt den Umsatz beeinflussen, ist die Beseitigung unnötiger Animationsbarrieren ein konkreter kommerzieller Vorteil.

Wie man testet

Reduzierte Bewegung auf OS-Ebene aktivieren: Unter macOS zu Systemeinstellungen > Bedienungshilfen > Anzeige gehen und „Bewegung reduzieren“ aktivieren. Unter Windows 11 zu Einstellungen > Barrierefreiheit > Visuelle Effekte gehen und „Animationseffekte“ deaktivieren. Unter iOS zu Einstellungen > Bedienungshilfen > Bewegung gehen und „Bewegung reduzieren“ aktivieren. Unter Android zu Einstellungen > Bedienungshilfen > Animationen entfernen gehen. Dadurch wird die Media-Query prefers-reduced-motion: reduce aktiv gesetzt.
Einen automatisierten Scan als Basislauf durchführen: Öffnen Sie axe DevTools oder Lighthouse in den Chrome DevTools für die Zielseite. Obwohl keines der Tools einen Verstoß gegen WCAG 2.3.3 direkt kennzeichnet, kann der Scan verwandte Probleme aufzeigen und bestätigt, dass die Testumgebung funktionsfähig ist. Notieren Sie alle animierungsbezogenen Ergebnisse als Kontext.
Mit der Seite interagieren, während OS „Bewegung reduzieren“ aktiv ist: Scrollen Sie die Seite langsam, klicken Sie auf interaktive Elemente wie Buttons, Navigationstoggles, Dropdowns, Karussells und Modale. Fahren Sie mit der Maus über Elemente. Navigieren Sie mit der Tastatur per Tab durch die Seite. Beobachten Sie, ob noch räumliche Bewegungsanimationen abgespielt werden. Wenn Animationen unterdrückt werden, ist dies ein Bestehen für den Pfad über die OS-Präferenz.
OS „Bewegung reduzieren“ deaktivieren und erneut testen: Mit deaktivierter OS-Einstellung wiederholen Sie alle Interaktionen. Identifizieren Sie jede Bewegungsanimation, die durch Nutzerinteraktion ausgelöst wird. Dokumentieren Sie jede mit einer Beschreibung der auslösenden Aktion und der beobachteten Animation.
Nach einem seitenspezifischen Animationsschalter suchen: Wenn OS „Bewegung reduzieren“ nicht beachtet wird, suchen Sie nach einer seitenspezifischen Steuerung — häufig in einem Barrierefreiheits-Widget, Einstellungsmenü oder Footer. Aktivieren Sie diese und wiederholen Sie alle Interaktionstests, um zu bestätigen, dass Bewegung unterdrückt wird.
CSS und JavaScript auf prefers-reduced-motion-Implementierung prüfen: Öffnen Sie DevTools, gehen Sie zum Reiter Sources oder Elements und suchen Sie in Stylesheet-Dateien nach prefers-reduced-motion. Verifizieren Sie, dass alle identifizierten Bewegungsanimationen durch diese Query abgesichert sind. In den Chrome DevTools können Sie die Media-Query emulieren: Öffnen Sie den Rendering-Tab (More Tools > Rendering) und setzen Sie „Emulate CSS media feature prefers-reduced-motion“ auf „reduce“. Bestätigen Sie, dass Animationen unterdrückt werden, ohne den Browser neu zu starten.
Wesentliche Ausnahmen bewerten: Für jede verbleibende Animation, wenn reduzierte Bewegung aktiv ist, beurteilen Sie, ob sie wirklich wesentlich ist — führt ihre Entfernung dazu, dass Informationen oder Funktionen wegfallen, für die es keine nicht animierte Entsprechung gibt? Dokumentieren Sie Ihre Begründung für jede Entscheidung.
Überprüfung mit Screenreader (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): Screenreader-Nutzende sind nicht immun gegen vestibuläre Effekte, wenn sie auch über ein Restsehvermögen verfügen. Navigieren Sie die Seite ausschließlich mit der Tastatur, während ein Screenreader aktiv ist und OS „Bewegung reduzieren“ aktiviert ist. Bestätigen Sie, dass keine Animationen durch Fokusereignisse oder tastaturgesteuerte Interaktionen ausgelöst werden, für die keine Anpassung für reduzierte Bewegung existiert.

Wie man es behebt

Parallax-Scroll-Effekt — Falsch

<!-- Hintergrund bewegt sich beim Scrollen mit anderer Geschwindigkeit als der Inhalt -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Erzeugt Parallax beim Scrollen */
    height: 100vh;
  }
</style>
<div class='hero'></div>

Parallax-Scroll-Effekt — Richtig

<!-- Parallax wird deaktiviert, wenn der Nutzer reduzierte Bewegung bevorzugt -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Standardmäßig Parallax */
    height: 100vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero {
      background-attachment: scroll; /* Statischer Hintergrund; keine räumliche Bewegung */
    }
  }
</style>
<div class='hero'></div>

CSS-Transition auf interaktivem Element — Falsch

<!-- Button gleitet und skaliert beim Klicken ohne Anpassung für reduzierte Bewegung -->
<style>
  .btn {
    transition: transform 0.4s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }
</style>
<button class='btn'>Submit</button>

CSS-Transition auf interaktivem Element — Richtig

<!-- Räumliche Transformation wird unterdrückt; eine einfache Opazitätsänderung vermittelt den Zustand ohne Bewegung -->
<style>
  .btn {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: opacity 0.2s ease; /* Nur nicht-räumliche Änderung bleibt erhalten */
    }
    .btn:active {
      transform: none; /* Keine Bewegung */
      opacity: 0.75;   /* Zustand wird weiterhin visuell vermittelt */
    }
  }
</style>
<button class='btn'>Submit</button>

JavaScript-Animationsbibliothek (GSAP) — Falsch

<!-- GSAP-Tween wird beim Klick auf den Button ausgelöst, unabhängig von der Bewegungspräferenz des Nutzers -->
<script>
  document.querySelector('#open-modal').addEventListener('click', () => {
    gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
  });
</script>

JavaScript-Animationsbibliothek (GSAP) — Richtig

<!-- matchMedia prüfen, bevor räumliche Animation ausgelöst wird; auf sofortige Anzeige zurückfallen -->
<script>
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  document.querySelector('#open-modal').addEventListener('click', () => {
    if (prefersReducedMotion) {
      /* Räumliche Bewegung überspringen; Modal einfach sofort sichtbar machen */
      gsap.set('#modal', { opacity: 1, y: 0 });
    } else {
      gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
    }
  });
</script>

Seitenspezifischer Animationsschalter (Barrierefreiheits-Widget) — Korrektes Muster

<!-- Nutzerpräferenz in localStorage speichern und eine Klasse auf <html> anwenden -->
<button id='toggle-motion' aria-pressed='false'>Reduce Motion</button>

<style>
  /* Standard: Animationen aktiv */
  .card { transition: transform 0.3s ease; }
  .card:hover { transform: translateY(-8px); }

  /* Wenn der Nutzer über das Widget ablehnt */
  html.reduce-motion .card {
    transition: none;
  }
  html.reduce-motion .card:hover {
    transform: none;
  }
</style>

<script>
  const btn = document.getElementById('toggle-motion');
  const stored = localStorage.getItem('reduceMotion') === 'true';

  if (stored) {
    document.documentElement.classList.add('reduce-motion');
    btn.setAttribute('aria-pressed', 'true');
  }

  btn.addEventListener('click', () => {
    const isActive = document.documentElement.classList.toggle('reduce-motion');
    btn.setAttribute('aria-pressed', String(isActive));
    localStorage.setItem('reduceMotion', String(isActive));
  });
</script>

Häufige Fehler

prefers-reduced-motion nur auf CSS-Animationen anwenden, aber nicht auf CSS-Transitionen: Sowohl die Kurzschreibweise animation als auch die Eigenschaft transition können räumliche Bewegung erzeugen. Teams schreiben häufig eine Media-Query für Keyframe-Animationen und vergessen, dass transition: transform 0.3s bei Hover oder Fokus ebenfalls Bewegung auslöst, die abgesichert werden muss.
prefers-reduced-motion: no-preference als Query-Bedingung statt reduce verwenden: Das korrekte Muster kapselt die reduzierten Erlebnisstile in @media (prefers-reduced-motion: reduce), nicht umgekehrt. Animationsstile in @media (prefers-reduced-motion: no-preference) zu kapseln, kann funktionieren, ist aber fehleranfälliger und wird oft falsch angewendet, sodass Animationen für Nutzende aktiv bleiben, die keine explizite Präferenz gesetzt haben.
Das Ergebnis von matchMedia einmal cachen und nie erneut prüfen: Ein Nutzer kann seine OS-Präferenz ändern, während die Seite geöffnet ist. Abonnieren Sie matchMedia(...).addEventListener('change', handler), damit JavaScript-gesteuerte Animationen auf Live-Änderungen der Präferenz reagieren, ohne dass ein Neuladen der Seite erforderlich ist.
Opazitätsüberblendungen als Bewegungsanimationen behandeln, die unterdrückt werden müssen: Das Kriterium zielt speziell auf räumliche Bewegung ab. Das Entfernen von Opazitäts-Transitionen, wenn reduzierte Bewegung aktiv ist, ist übermäßig restriktiv und verschlechtert die Nutzbarkeit. Überblendungen, die Elemente nicht durch den Raum bewegen, können im Allgemeinen beibehalten werden.
Den Animationsschalter tief in einem unzugänglichen Einstellungsmenü platzieren: Wenn eine seitenspezifische Steuerung anstelle der (oder zusätzlich zur) OS-Media-Query verwendet wird, muss sie leicht zu finden sein — idealerweise in der persistenten Seitenkopfzeile, im Footer oder in einem zugänglichen Overlay-Widget — und nicht drei Ebenen tief in einer Kontoeinstellungsseite versteckt, die eine Anmeldung erfordert.
Annehmen, dass alle Animationsbibliotheken automatisch prefers-reduced-motion beachten: Die meisten JavaScript-Animationsbibliotheken, einschließlich GSAP, Anime.js und benutzerdefinierte requestAnimationFrame-Implementierungen, beachten die Media-Query nicht automatisch. Jede programmatische Animation muss individuell mit einer matchMedia-Prüfung in der JavaScript-Schicht abgesichert werden.
Eine Animation ohne ausreichende Begründung als wesentlich deklarieren: Teams stufen komplexe dekorative Animationen manchmal als wesentlich ein, um den Nachbesserungsaufwand zu vermeiden. Die Ausnahme für wesentliche Animationen ist eng; eine Animation ist nur wesentlich, wenn die Information, die sie vermittelt, nicht durch statische oder nicht animierte Mittel ausgedrückt werden kann. Lade-Spinner, dekorative Parallax-Effekte und Seiten-Eintrittsanimationen qualifizieren sich fast nie als wesentlich.
Interaktionen jenseits von Klicks nicht testen — insbesondere Scrollen und Hover: Parallax-Scroll-Effekte und Hover-ausgelöste Transformationen gehören zu den häufigsten vestibulären Problemverursachern, dennoch beschränkt sich das Testen oft auf Klickinteraktionen. Umfassende Tests müssen alle Interaktionsmodalitäten abdecken, einschließlich Scrollen, Hover, Fokus, Drag und Tastaturnavigation.
Die Präferenz des seitenspezifischen Schalters nicht sitzungsübergreifend speichern: Wenn ein Nutzer einen Seitenschalter zur Reduzierung von Bewegung setzt und dann zu einer anderen Seite navigiert oder die Seite am nächsten Tag erneut besucht und die Einstellung zurückgesetzt ist, ist die Anpassung faktisch gescheitert. Präferenzen müssen in localStorage oder einem Nutzerprofil gespeichert und bei jedem Seitenladen erneut angewendet werden.
Drittanbieter-Einbettungen und -Widgets vergessen: Eingebettete Social-Feeds, Chat-Widgets, Karten-Einbettungen und Werbeskripte können eigene Bewegungsanimationen einführen, die vollständig außerhalb der CSS-Kontrolle der Hostseite liegen. Drittanbieterinhalte müssen geprüft werden, und Anbieter müssen zur Bereitstellung von Unterstützung für reduzierte Bewegung verpflichtet werden, oder die Einbettungen müssen, wo möglich, in Container eingebettet werden, die Bewegung über CSS-Containment-Strategien unterdrücken.

Bezug zu den Barrierefreiheitsvorschriften der Türkei

Die türkische Präsidialverfügung 2025/10, veröffentlicht im Amtsblatt (Resmî Gazete) Nr. 32933 am 21. Juni 2025, legt verbindliche digitale Barrierefreiheitsverpflichtungen für einen definierten Kreis von in der Türkei tätigen Einheiten fest. Zu den erfassten Einheiten gehören öffentliche Institutionen und Behörden, E-Commerce-Plattformen, Banken und Finanzdienstleister, Krankenhäuser und private Gesundheitseinrichtungen, Telekommunikationsanbieter mit 200.000 oder mehr Abonnenten, lizenzierte Reisebüros, private Transportunternehmen und private Schulen, die vom Bildungsministerium (MoNE) autorisiert sind.

Die Verfügung schreibt die Konformität mit WCAG 2.1 auf Stufe AA als Mindeststandard für digitale Dienste vor, die nach dem Inkrafttreten erstellt oder wesentlich aktualisiert werden. WCAG 2.3.3 — Animation aus Interaktionen ist ein Kriterium der Stufe AAA und daher keine zwingende Anforderung nach der Präsidialverfügung 2025/10. Erfasste Einheiten sind rechtlich nicht verpflichtet, dieses Kriterium umzusetzen, um einen konformen Status nach türkischem Recht zu erreichen.

Die Erreichung der Konformität der Stufe AAA bei Kriterien wie 2.3.3 hat jedoch erheblichen praktischen und reputationsbezogenen Wert für türkische Organisationen. Vestibuläre und bewegungssensitive Erkrankungen sind unsichtbare Behinderungen, die in Barrierefreiheitsaudits, die sich eng auf Screenreader-Kompatibilität konzentrieren, häufig übersehen werden. Für Sektoren wie das Gesundheitswesen (Krankenhäuser und private Gesundheitsplattformen), in denen die Nutzenden Patienten mit neurologischen Erkrankungen sein können, die die Bewegungssensitivität erhöhen, und für E-Commerce und Reisebüros, in denen starkes Scrollen und animierte UI-Muster üblich sind, zeigt die Umsetzung von 2.3.3 einen ausgereiften, nutzerzentrierten Ansatz für Barrierefreiheit.

Organisationen, die eine freiwillige AAA-Konformität anstreben — etwa solche, die sich Vorteile bei öffentlichen Ausschreibungen, den Eintritt in internationale Märkte oder Branchenzertifizierungen sichern wollen — sollten 2.3.3 als Prioritätskriterium behandeln, angesichts der relativ geringen Nachbesserungskosten (eine gut strukturierte prefers-reduced-motion-Media-Query-Strategie kann systematisch über ein Designsystem hinweg angewendet werden) und des direkten körperlichen Schadens, den sein Fehlen verursachen kann. Die Aufnahme einer Animationssteuerung in ein Barrierefreiheits-Overlay-Widget wie Accsible ermöglicht es türkischen Organisationen, diese Anpassung anzubieten, ohne dass Nutzende ihre Betriebssystemeinstellungen finden müssen — und macht den Weg zu reduzierter Bewegung für die größtmögliche Zielgruppe auffindbar und nutzbar.