So vermeidest du Ablenkung, Unwohlsein und epileptische Anfälle
Überblick zu SOP 33
👉 Warum machst du das überhaupt?
🕓 Wann musst du das machen?
- Immer, wenn du irgendeine Form von Animation oder Bewegung einsetzt.
- Konkret bei: automatisch startenden Videos und Karussells, Parallax-Scrolling-Effekten, animierten GIFs, CSS-Animationen beim Laden oder Hovern und jeglichen Inhalten, die blinken.
⚖️ Welches Gesetz verlangt das?
- European Accessibility Act (EAA) / Barrierefreiheitsstärkungsgesetz (BFSG): Die Nutzung von Diensten darf nicht zu gesundheitlichen Risiken führen.
- WCAG 2.1 , hier sind zwei Sicherheitskriterien von höchster Priorität:
- 2.2.2 Pause, Stop, Hide: Für jede Bewegung oder automatisch startende Animation, die länger als 5 Sekunden dauert, muss es eine Steuerungsmöglichkeit für den Nutzer geben.
- 2.3.1 Three Flashes or Below Threshold: Kein Inhalt darf öfter als dreimal pro Sekunde aufblitzen. Dies ist eine absolute Sicherheitsgrenze.
- Empfehlung für exzellente Barrierefreiheit:
- 2.3.3 Animation from Interactions (AAA): Eine Option anbieten, um nicht essenzielle Animationen komplett zu deaktivieren.
🧭 Der Prozess im Detail
🟧 Phase 1: Inventarisierung – Was bewegt sich auf deiner Seite?
Mache eine Bestandsaufnahme aller animierten Elemente, um den Handlungsbedarf zu erkennen.
- Automatisch startende Karussells und Slider
- Hintergrundvideos
- CSS-Animationen (z. B. einfliegende Elemente)
- Hover-Effekte mit starker Bewegung
- Parallax-Scrolling-Effekte
- Animierte GIFs
- Lade-Animationen
🟨 Phase 2: Automatische Bewegung anhalten – Der Pause-Button
🟨 Phase 2: Automatische Bewegung anhalten – Der Pause-Button
🟩 Phase 3: Den Wunsch des Nutzers respektieren – prefers-reduced-motion
- Dies ist die eleganteste und wichtigste technische Lösung. Nutzer:innen können in ihrem Betriebssystem (Windows, macOS, iOS, Android) einstellen, dass sie weniger Bewegung wünschen. Deine Website kann und muss diese Einstellung respektieren. Implementiere dafür eine CSS Media Query:
CSS
/* Eine Standard-Animation */
.fade-in-element {
animation: fade-in 1s ease;
}
/* Die Animation für Nutzer deaktivieren, die es wünschen */
@media (prefers-reduced-motion: reduce) {
.fade-in-element,
.slide-in-element,
.parallax-section {
animation: none;
transition: none; /* Auch Übergänge deaktivieren */
}
}
Weise deine Entwickler:innen an, alle nicht essenziellen Animationen in einen solchen @media-Block zu packen.
🟥 Phase 4: Parallax-Effekte und Scroll-Animationen zähmen
• Diese Effekte sind besonders problematisch für Menschen mit vestibulären Störungen.
- Die beste Lösung: Vermeide sie.
- Die zweitbeste Lösung: Nutze den prefers-reduced-motion-Ansatz aus Phase 3, um die Effekte für Nutzer:innen, die dies wünschen, komplett zu deaktivieren.
- Zusätzlich: Biete einen sichtbaren Schalter auf der Seite an, um die Bewegungseffekte manuell ein- und auszuschalten.
🟦 Phase 5: Blinken und Flackern strikt vermeiden – Anfälle verhindern
• Dies ist eine nicht verhandelbare Sicherheitsregel (WCAG 2.3.1).
- Die Drei-Blitze-Regel: Kein Bereich auf dem Bildschirm darf öfter als dreimal pro Sekunde aufblitzen oder flackern.
- Vorsicht bei Videos: Besonders bei Videoinhalten musst du sicherstellen, dass keine schnellen Schnittfolgen oder Stroboskop-Effekte enthalten sind, die diesen Grenzwert verletzen.
- Im Zweifel: Vermeide blinkende Effekte vollständig. Für die Analyse von Videoinhalten gibt es spezielle Tools (z. B. PEAT), die aber in der Regel nur für große Medienproduktionen relevant sind.
✅ Ergebnis
Am Ende dieser SOP hast du:
- Eine Website, die für Menschen mit Photosensibilität und vestibulären Störungen sicher und komfortabel nutzbar ist.
- Eine ruhigere, weniger ablenkende und fokussiertere Nutzererfahrung für alle deine Besucher:innen.
- Kritische Sicherheitsanforderungen der WCAG zuverlässig erfüllt.
- Dein Team für den verantwortungsbewussten Einsatz von Animationen sensibilisiert. Dieses Template dient dir als direkte Arbeitsanweisung für Entwickler:innen und Designer:innen, um Slider, Karussells und Akkordeons gemäß SOP 31 barrierefrei umzusetzen. Es fasst die technischen Anforderungen prägnant zusammen und dient als Checkliste für die Implementierung. Betreff: Neue Richtlinie für den Einsatz von Animationen und Bewegung Hallo Team,
um unsere Website sicherer und zugänglicher zu machen, gelten ab sofort folgende verbindliche Regeln für alle Animationen:
- Keine automatische Bewegung ohne Kontrolle: Jede Animation (Karussell, Video etc.), die automatisch startet und länger als 5 Sekunden dauert, muss einen sichtbaren Pause/Stop-Button haben.
- prefers-reduced-motion ist Pflicht: Alle nicht essenziellen Animationen und Übergänge müssen innerhalb eines @media (prefers-reduced-motion: reduce)-Blocks deaktiviert werden. Nutzer:innen, die in ihrem Betriebssystem weniger Bewegung eingestellt haben, dürfen keine Animationen sehen.
- Blink-Verbot: Inhalte, die mehr als dreimal pro Sekunde aufblitzen, sind verboten.
Bitte stellt sicher, dass diese drei Punkte bei allen neuen und bestehenden Komponenten geprüft und umgesetzt werden.
Danke für eure wichtige Mitarbeit!
Viele Grüße [Dein Name] Fragen und Antworten (FAQ ) zu dieser SOP
💬 Copy-Paste-Baustein
Fragen und Antworten (FAQ) zu dieser SOP
Was genau sind%22nicht essenzielle Animationen%22 Animationen, die ich nicht deaktivieren sollte?
Essenzielle Animationen sind solche, die Informationen vermitteln oder Feedback geben , die auf keine andere Weise verfügbar sind. Wenn du sie deaktivierst, würde die Funktionalität oder Verständlichkeit der Seite leiden. Beispiele dafür sind:
• Ein Lade-Spinner, der den Ladezustand anzeigt, wenn kein alternativer Text ( aria-live="polite" ) oder Fortschrittsbalken vorhanden ist.
• Eine Animation, die visuell darstellt, dass ein Element erfolgreich in den Warenkorb gelegt wurde und sich bewegt, um dort anzukommen, wenn es keine simultane, deutlich sichtbare und von Screenreadern lesbare Erfolgsmeldung gibt.
• Ein Hover-Effekt, der lediglich einen Schaltflächenzustand (z.B. Highlight bei Maus über Button) anzeigt, solange er keine starke Bewegung erzeugt.
Im Zweifel gilt: Wenn die Animation nur zur Ästhetik dient und ihre Deaktivierung die Nutzererfahrung oder das Verständnis der Inhalte nicht beeinträchtigt, ist sie nicht essenziell und sollte reduziert werden können.
Wie kann ich sicherstellen, dass meine Entwickler prefers-reduced-motion konsequent für alle relevanten Animationen implementieren?
Ja, unbedingt! Die Präferenz des Nutzers sollte persistieren . Das bedeutet, wenn ein Nutzer ein Karussell pausiert, sollte es nach dem Neuladen der Seite oder beim erneuten Besuch der Seite weiterhin pausiert bleiben. Dies erreichst du, indem du die Einstellung des Pause-Buttons (z.B. „pausiert“ oder „aktiv“) im lokalen Speicher des Browsers ( localStorage ) speicherst. Beim Laden der Seite prüft ein kleines JavaScript-Snippet, ob eine solche Präferenz gespeichert ist und wendet sie dann sofort an. Das erhöht die Nutzerfreundlichkeit und den Respekt vor der Nutzerentscheidung erheblich.
Meine Website verwendet viele GIFs, die sich in einem Loop befinden. Wie gehe ich damit um, besonders im Hinblick auf Phase 5 (Blinken und Flackern vermeiden) und prefers-reduced-motion?
Animierte GIFs sind oft eine Grauzone. Wenn sie sich ständig wiederholen und schnelle, helle Wechsel beinhalten, können sie Phase 5 verletzen und Anfälle auslösen.
• Drei-Blitze-Regel beachten: Wenn ein GIF diese Regel verletzt, muss es entfernt oder angepasst werden. Tools wie PEAT helfen hier für Videos, aber für GIFs ist oft eine manuelle Sichtprüfung nötig.
• prefers-reduced-motion für GIFs: Du kannst GIFs nicht direkt mit CSS animation: none; anhalten. Die beste Lösung ist, das GIF durch ein statische(s) Bild (z.B. ein .png oder .webp ) zu ersetzen, wenn prefers-reduced-motion: reduce aktiv ist. Dies erfordert JavaScript, das die Quell-URLs der GIFs austauscht, oder eine serverseitige Logik, die unterschiedliche Bilder ausliefert.
• Alternative Videoformate: Überlege, ob du statt GIFs lieber *.mp4 – oder *.webm -Videos verwendest. Diese sind kleiner, haben bessere Qualitätsoptionen und lassen sich über
Wir nutzen ein Designsystem. Sollte die prefers-reduced-motion-Regel direkt in den Komponenten des Designsystems verankert werden?
Ja, absolut! Das ist der idealste und effizienteste Weg. Wenn prefers-reduced-motion direkt in den Basiskomponenten deines Designsystems verankert wird (also in den CSS-Definitionen der Buttons, Slider, Cards, die Animationen nutzen), dann wird diese Barrierefreiheitsregel automatisch auf alle Instanzen dieser Komponenten angewendet. Das spart Entwicklungsaufwand bei jedem neuen Feature und stellt eine konsistente Einhaltung über die gesamte Website oder Anwendung sicher. Es ist ein proaktiver Ansatz, der Fehler von vornherein minimiert und die Skalierbarkeit der Barrierefreiheit maximiert.