3.4 Bewegung und Lesen

Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.

Lesen ist ein motorischer Akt. Das Auge gleitet nicht sanft die Zeile entlang; es springt in Sakkaden und landet in Fixationen, und das Verstehen geschieht in den Landungen. Alles, was sich auf der Seite bewegt, konkurriert um diese Landungen. Bewegung ist das stärkste Aufmerksamkeitssignal, das das visuelle System besitzt — ein evolutionärer Alarm, der sich durch Willenskraft nicht abschalten lässt —, weshalb animierte Elemente in Textnähe so zersetzend für das Lesen sind und Text, der sich selbst bewegt, kaum noch lesbar ist.

Das moderne Web ist gesättigt mit Bewegung: Eingangsanimationen, Parallax-Kulissen, scrollausgelöste Enthüllungen, automatisch weiterschaltende Karussells. Manches davon ist Handwerk. Vieles ist Dekoration auf Kosten der Lesenden. Und für eine Gruppe von Lesenden ist es schlimmer als Ablenkung.

Vestibuläre Störungen: Bewegung als Schaden

Für Menschen mit vestibulären Störungen — Erkrankungen des Innenohrs und des Gleichgewichtssystems — kann Bewegung auf dem Bildschirm Schwindel, Übelkeit, Vertigo und Kopfschmerzen auslösen, die lange nach dem Wegsehen anhalten. Die Auslöser sind spezifisch und von Betroffenen gut beschrieben: große Elemente, die über den Viewport gleiten, Zoom- und Skalierungseffekte, Parallax-Ebenen, die sich mit unterschiedlichen Geschwindigkeiten bewegen, und scrollgekoppelte Animation, die das, was das Auge sieht, von dem entkoppelt, was die Hand getan hat. Das ist kein Ärgernis; es ist eine körperliche Reaktion, näher an der Reisekrankheit als am Missfallen. Eine Seite kann eine Leserin krank machen.

Die WCAG adressieren dies in 2.3.3 (Animation from Interactions): Durch Interaktion ausgelöste Bewegungsanimation soll abschaltbar sein, sofern die Animation nicht essenziell ist. Es ist ein AAA-Kriterium, was seine Bedeutung untertreibt — für die betroffene Population ist es keine Verbesserung, sondern der Unterschied zwischen benutzbar und unbenutzbar.

Der Schalter der Lesenden: prefers-reduced-motion

Jedes große Betriebssystem bietet inzwischen eine Einstellung „Bewegung reduzieren“, und die Media Query prefers-reduced-motion macht sie Stylesheets und Skripten zugänglich. Sie zu honorieren ist eine harte Anforderung verantwortungsvoller Praxis, keine Progressive Enhancement — aus einem einfachen Grund: Die Menschen, die sie gesetzt haben, taten es, weil Bewegung ihnen schadet. Die Einstellung zu ignorieren heißt, eine erklärte medizinische Vorkehrung zu ignorieren.

Sie gut zu honorieren bedeutet mehr, als Animationen abzuschalten:

• Ersetzen Sie Bewegung durch Opazität. Ein Einblenden kommuniziert „dies ist erschienen“, ohne etwas über den Bildschirm zu verschieben; Überblendungen werden weithin toleriert, wo Slides und Zooms es nicht werden.
• Deaktivieren Sie Parallax- und scrollgekoppelte Effekte unter reduzierter Bewegung vollständig — es gibt keine reduzierte Version von Parallax, die es zu behalten lohnt.
• Wenden Sie die Präferenz auch in JavaScript-gesteuerter Animation an, nicht nur in CSS; die Media Query ist aus Skripten abfragbar, und Animationsbibliotheken lassen sich daran koppeln.
• Interpretieren Sie „reduzieren“ nicht als „jede Zustandsänderung entfernen“. Auch abrupte Übergänge können desorientieren; das Ziel ist die Beseitigung überflüssiger räumlicher Bewegung, nicht des Feedbacks.

Bewegter Text ist unlesbarer Text

Text, der scrollt, tickert, gleitet oder blinkt, hebelt die Sakkaden-und-Fixations-Maschinerie vollständig aus. Sehbehinderte Lesende, Lesende mit Vergrößerungssoftware (für die ein bewegtes Ziel den vergrößerten Bereich mitten im Wort verlassen kann), Lesende mit Dyslexie oder Aufmerksamkeitsschwierigkeiten und Lesende, die schlicht langsam lesen, werden alle überproportional bestraft: Der Text verschwindet, bevor sie ihn beendet haben.

WCAG 2.2.2 (Pause, Stop, Hide) — ein Kriterium der Stufe A, der untersten und am wenigsten verhandelbaren — verlangt, dass jeder sich bewegende, blinkende oder scrollende Inhalt, der automatisch startet und länger als fünf Sekunden dauert, einen Mechanismus zum Pausieren, Stoppen oder Ausblenden besitzt. Der mit Abstand häufigste Übeltäter ist das automatisch weiterschaltende Karussell, besonders eines mit Text. Ein Karussell, das nach Zeitschaltuhr rotiert, garantiert, dass manche Lesende eine Folie nie zu Ende lesen; die „Pause“-Steuerung ist, wenn überhaupt vorhanden, regelmäßig winzig, unbeschriftet oder erst nach dem Frust auffindbar, den sie hätte verhindern sollen. Wenn Inhalt zählt, verdient er Stille. Wenn er automatisch rotiert, hat das Design bereits eingeräumt, dass er nicht zählt — und er sollte nur unter der Kontrolle der Lesenden weiterschalten.

Scrollausgelöste Texteffekte verdienen besonderes Misstrauen: Absätze, die beim Eintritt in den Viewport einblenden, Schlagzeilen, die Buchstabe für Buchstabe zusammengesetzt werden, Text, der fixiert bleibt, während Hintergründe scrollen. Jeder schiebt eine Animation zwischen die Leserin und die Wörter. Die Leserin kam, um zu lesen; sorgen Sie dafür, dass die Wörter da sind.

Bewegung, die das Lesen respektiert

Nichts davon plädiert für ein statisches Web. Bewegung hat legitime Arbeit: anzuzeigen, dass eine Aktion registriert wurde, zu zeigen, wohin ein geschlossenes Panel verschwand, das Auge auf eine Änderung zu lenken, die es sonst verpassen würde. Bewegung in diesem Dienst ist kurz, klein, selten und wird nie auf Fließtext angewandt. Ein nützlicher Satz von Tests:

• Vermittelt die Bewegung etwas, das die Leserin braucht, oder dekoriert sie etwas, das dem Designer gefällt?
• Ist sie nahe an oder auf Text, den gerade jemand liest?
• Läuft sie einmal, kurz, oder loopt sie?
• Respektiert sie prefers-reduced-motion vollständig?

Kurz, zweckdienlich, fern vom Lesetext, die Nutzerin respektierend: Bewegung, die diese Tests besteht, verdient ihren Platz.

Warum dieses Kapitel neu ist

Die erste Auflage entstand vor den Bedingungen, die dieses Kapitel nötig machen. 2005 konnte CSS nicht animieren; ernsthafte Bewegung erforderte Flash, und dessen Barrierefreiheitsdebatte kreiste um Blinken und Anfallsrisiko, nicht um vestibulären Schaden. Die Query prefers-reduced-motion erschien erst 2017 in Browsern, WCAG 2.3.3 kam 2018 mit Version 2.1, und der scrollgetriebene, animationsgesättigte Hausstil des modernen Web ist jünger als das. Bewegung wurde billig; die Disziplin der Zurückhaltung ist das, was diese Richtlinien nun hinzufügen können.

In CSS

/* Default: entrance combines movement and fade */
.reveal {
  animation: slide-fade-in 300ms ease-out;
}

@keyframes slide-fade-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

/* Reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: fade-in 200ms ease-out;
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Coarse safety net for unaudited animation — a last
   resort, not the practice; it also removes the fades
   and feedback worth keeping */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Empfehlungen

• Honorieren Sie prefers-reduced-motion überall — in CSS und JavaScript — als harte Anforderung.
• Ersetzen Sie unter reduzierter Bewegung Slides und Zooms durch Einblendungen; entfernen Sie Parallax- und scrollgekoppelte Effekte vollständig.
• Animieren Sie nie Fließtext. Lesen und Bewegung sind Feinde.
• Erfüllen Sie WCAG 2.2.2: Alles, was sich länger als fünf Sekunden automatisch bewegt, braucht eine sichtbare Steuerung zum Pausieren, Stoppen oder Ausblenden.
• Vermeiden Sie automatisch weiterschaltende Karussells für bedeutsame Inhalte; existiert eines, lassen Sie die Leserin es steuern.
• Halten Sie zweckdienliche Bewegung kurz, klein und ohne Schleifen, und halten Sie sie fern von Text, der gelesen wird.
• Testen Sie Schlüsselseiten mit aktivierter OS-Einstellung zur Bewegungsreduktion; behandeln Sie jede verbleibende räumliche Animation als Fehler.

Weiterführende Literatur

• MDN: prefers-reduced-motion
• web.dev: prefers-reduced-motion
• WCAG 2.2 Understanding: 2.3.3 Animation from Interactions
• WCAG 2.2 Understanding: 2.2.2 Pause, Stop, Hide