Was ist Bewegungsempfindlichkeit?
Bewegungsempfindlichkeit bezieht sich darauf, wie bestimmte Nutzer, insbesondere solche mit Gleichgewichtsstörungen oder neurologischen Erkrankungen, auf Animationen, Übergänge und blinkende Inhalte reagieren. Während Bewegung für einige die UI/UX verbessern kann, kann sie bei anderen Schwindel, Übelkeit, Kopfschmerzen oder sogar Krampfanfälle auslösen.
Beispiel: Automatisch scrollende Banner oder Parallaxen-Hintergrundeffekte mögen modern erscheinen, können aber bei bewegungsempfindlichen Benutzern zu Desorientierung führen.
Warum Bewegungsempfindlichkeit für die Barrierefreiheit wichtig ist
Für Benutzer mit Gleichgewichtsstörungen oder Epilepsie sind Bewegungen nicht dekorativ, sondern behindern sie. Aus diesem Grund wurden in den WCAG 2.1 die Richtlinien 2.3.3 (Animation von Interaktionen) und 4.1.3 (Benutzereinstellungen) eingeführt, um dies zu gewährleisten:
- Bewegung kannreduziert oder deaktiviert werden
- Die Benutzer werden keinen schädlichen Auswirkungen ausgesetzt
- Inhalte bleiben auch ohne Bewegung nutzbar
Gesetzliche Standards wie der ADA (USA) und das BFSG (Deutschland) verlangen die Einhaltung der WCAG-Richtlinien, so dass die Bewegungssteuerung eine Notwendigkeit zur Einhaltung ist.
Wie man bewegungsempfindliche Benutzer unterstützt
✅ Verwenden Sie die CSS Media Query prefers-reduced-motion
Moderne Browser erlauben es den Benutzern, eine systemweite Präferenz für reduzierte Bewegung einzustellen. Sie können dies berücksichtigen, indem Sie implementieren:
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
Übergang: none !important;
scroll-behavior: auto !important;
}
}
Dies ist Ihre erste Verteidigungslinie für eine barrierefreie Webentwicklung.
Design Best Practices für TYPO3, WordPress und darüber hinaus
TYPO3-Tipps:
- Vermeiden Sie Autoplay-Slider oder Hintergrundanimationen in Vorlagen.
- Verwenden Sie Erweiterungen, die die Bewegungspräferenzen respektieren oder es den Benutzern ermöglichen, die Bewegung anzuhalten/zu stoppen.
- Passen Sie CSS mit prefers-reduced-motion in Ihren Website-Paketen an.
WordPress-Tipps:
- Wählen Sie Themes mit der Kennzeichnung"Barrierefreiheit bereit".
- Beschränken Sie animationslastige Plugins oder Seitenerstellungsprogramme.
- Bieten SiePause-/Abspielkontrollen bei animierten Karussells oder Bannern.
Universelle Richtlinien:
- Vermeiden Sieblinkende Inhalte (insbesondere 3+ Blitze pro Sekunde - WCAG 2.3.1)
- Machen Sie Übergängeoptional, subtil und benutzergesteuert
- Ermöglichen Sie den Nutzern, sich gegen automatisch animierte Effekte zu entscheiden.
Häufige Irrtümer und Missverständnisse
❌ "Bewegung lässt die Seite cool aussehen, also ist sie es wert."
✔️ Nicht, wenn sie die Nutzer verunsichert oder ihnen körperlich schadet.
❌ "Subtile Einblendungen spielen keine Rolle."
✔️ Selbst kleine Übergänge können bei Nutzern mit Gleichgewichtsstörungen Symptome auslösen.
❌ "Animationen sind rein visuell, sie haben keinen Einfluss auf die Zugänglichkeit."
✔️ Bewegung wirkt sich direkt auf die Benutzerfreundlichkeit und den Komfort aus, sie ist sehr wohl ein Problem der Zugänglichkeit.
Entdecken Sie verwandte Glossarbegriffe: WCAG, kognitive Behinderungen, Benutzerpräferenzen, barrierefreie Benutzeroberfläche, Barrierefreiheit im Web
Wichtigste Erkenntnis
Wenn Bewegung nicht optional ist, ist sie nicht inklusiv. Barrierefreies Design bedeutet, dass Sie den Benutzern die Kontrolle darüber geben, wie sie mit Ihrer Website interagieren. Respektieren Sie die Bewegungsempfindlichkeit, um sicherzustellen, dass Ihr digitales Erlebnis für alle einladend ist.
Möchten Sie Ihre Website für bewegungsempfindliche Benutzer sicherer machen?
Lassen Sie Ihre Website durch den T3AA Accessibility Analyzer laufen und laden Sie unseren Motion Accessibility Quick Guide herunter, um bewegungsbedingte Barrieren zu erkennen und zu korrigieren.Design with care. Animieren Sie verantwortungsbewusst. Fördern Sie Komfort und Klarheit.