CSS


prefers-reduced-motion
Unterdrücken von Animationen

(Materialsammlung)

Mit der Medienanweisung prefers-reduced-motion können in CSS Animationen unterdrückt werden, sofern entsprechende Anweisungen im Browser vorgenommen wurden. Nutzer*innen können diese Einstellungen vornehmen, wenn bewegte oder blinkende Elemente ihre Wahrnehmung einer Webseite beeinträchtigen.

Einstellung konfigurieren

Die Konfiguration der Verminderung von Animationen erfolgt in den Einstellungen für das verwendete Gerät. Im Betriebssystem Windows 11 gelingt dies beispielsweise folgendermaßen:

  1. Einstellungen (Windows+I)
  2. Barrierefreiheit
  3. Visuelle Effekte
  4. Animationseffekte
  5. Aus

CSS Code

Animationen umfassend abschalten

Um CSS-Animationen generell bei einer entsprechenden Konfiguration des Geräts zu verhindern, wird folgender Code in die CSS-Hauptdatei eingefügt: 

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Minimale Animationen

Animationen, die ohne Bewegung etwa nur aus dezenten Farbänderungen bestehen, können den WCAG-Anforderungen genügen. So kann für eine heftige Animation auch eine konforme Alternative bereitgestellt werden: 

.meine-animation {
  // Standardanimation mit heftigen Bewegungen
}

@media (prefers-reduced-motion: reduce) {
  .meine-animation {
    // Alternative mit dezentem Farbwechsel
  }
}

Damit abgeschwächte Alternativen technisch zugelassen werden, muss die Anweisung !important aus den allgemeinen Anweisungen entfernt werden. 

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}