Zugängliche Bewegung: Entwerfen für bevorzugte Bewegung, ohne die Bedeutung zu verlieren
So gestalten Sie Bewegungen, die reduzierte Bewegungseinstellungen und Vestibularstörungen berücksichtigen: Was WCAG erfordert, was entfernt werden muss, was beibehalten werden muss und wie getestet werden soll.
Kernaussage
Wenn ein Benutzer die reduzierte Bewegung einschaltet, behalten Sie die Bedeutung jeder Animation bei, entfernen Sie jedoch die Bewegung: Ersetzen Sie Folien, Zooms und Parallaxe durch kurze Überblendungen oder sofortige Änderungen, stoppen Sie die automatische Wiedergabe von Schleifen und verlassen Sie sich nie allein auf Bewegung, um etwas zu kommunizieren. Erkennen Sie die Einstellung im Web mit der Medienabfrage „Preferred-Reduced-Motion“.
Warum es wichtig ist
Für manche Menschen ist Bewegung auf dem Bildschirm keine Frage des Geschmacks. Das W3C stellt fest, dass Animationen Gleichgewichtsstörungen auslösen können, mit Reaktionen wie Übelkeit, Migräne und in schweren Fällen der Notwendigkeit von Bettruhe zur Genesung. Mit Betriebssystemen können Benutzer nach weniger Bewegung fragen, und im Internet wird diese Anforderung als Medienabfrage „Bevorzugt reduzierte Bewegung“ angezeigt. Der Wert wird verringert, wenn der Benutzer die Einstellung aktiviert hat.
Was WCAG verlangt
Zwei WCAG Erfolgskriterien decken die Bewegung ab. 2.2.2 „Pause, Stopp, Ausblenden“ gilt für Bewegungen, die automatisch starten, wie z. B. Karussells und sich wiederholende Animationen, und erfordert eine Möglichkeit, sie anzuhalten, zu stoppen oder auszublenden. 2.3.3 Animation aus Interaktionen (Stufe AAA) bezieht sich auf Bewegungen, die durch Benutzerinteraktionen ausgelöst werden, und schlägt vor, unnötige Animationen zu vermeiden, ein Steuerelement zum Ausschalten anzubieten oder die Einstellung „Bewegung reduzieren“ des Betriebssystems zu verwenden. Auch wenn AAA nicht erforderlich ist, ist es eine gute Praxis, es zu befolgen.
Bewegung entfernen, Bedeutung behalten
Reduzierte Bewegung bedeutet nicht, dass keine Rückmeldung erfolgt. Ein Benutzer, der eine Taste drückt, muss trotzdem wissen, dass es funktioniert hat. Ziel ist es, den Zustandswechsel beizubehalten und das Reisen einzustellen.
- Entfernen oder verkleinern: große Folien, Zooms, Parallaxe, Scroll-verknüpfte Bewegung, Drehen, automatische Wiedergabe von Schleifen und Hintergrundvideo.
- Behalten Sie: Farb- und Deckkraftänderungen, Fokusindikatoren, kurze Zustandsübergänge, Fortschrittsinformationen.
- Ersetzen Sie: Seiten- und Panelübergänge durch eine kurze Überblendung oder einen sofortigen Wechsel.
- Niemals: Verwenden Sie Bewegung als einzige Möglichkeit, einen Fehler, eine Änderung oder ein neues Element anzuzeigen.
Es umsetzen
Schließen Sie im Web nicht wesentliche Bewegungen in @media ein (prefers-reduced-motion: no-preference) oder überschreiben Sie sie in @media (prefers-reduced-motion: Reduce). Lesen Sie in JavaScript window.matchMedia('(prefers-reduced-motion: Reduce)') und achten Sie auf Änderungen. Native Plattformen stellen dieselbe Einstellung bereit: SwiftUI, UIKit und Android ermöglichen es Ihnen, sie zu überprüfen. Wenn Ihr Designsystem über Bewegungstokens verfügt, definieren Sie für jedes eine reduzierte Variante, damit sich jede Komponente gleich verhält.
Testen
Aktivieren Sie die reduzierte Bewegung in Ihrem Betriebssystem und gehen Sie jeden wichtigen Ablauf durch. Stellen Sie sicher, dass nichts Wichtiges verloren geht, dass keine Schleifen automatisch gestartet werden und dass beim Scrollen der Inhalt nicht über das hinausgeht, was das Scrollen selbst bewirkt. Auch Browser-Entwicklertools können die Einstellung emulieren.
Produktionsnahes Implementierungsbeispiel
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });Wichtige Prinzipien
- Bewegung kann bei manchen Menschen körperlich krank machen; Respektiere die Einstellung
- Entfernen Sie Reisen, Zoom, Parallaxe und automatische Wiedergabe. Behalten Sie Zustandsänderungen und Feedback bei
- WCAG 2.2.2 deckt automatische Bewegungen ab; 2.3.3 behandelt Bewegung aus Interaktion
- Erkennen Sie die Einstellung mit Preferences-Reduced-Motion und auf jeder nativen Plattform
- Entwerfen Sie für jedes Bewegungstoken eine reduzierte Variante
Häufige Fragen
Quellen
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN Webdokumente
- Motion — Richtlinien zur Benutzeroberfläche von Apple