Motion & Animation

prefers-reduced-motion Muss

Alle Animationen und Übergänge müssen prefers-reduced-motion respektieren (WCAG 2.3.3).

@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;
  }
}

Kein Blinken Muss

Inhalte dürfen nicht mehr als dreimal pro Sekunde blinken (WCAG 2.3.1). Dies kann bei betroffenen Menschen epileptische Anfälle auslösen.

Automatische Bewegung Muss

Automatisch startende Bewegungen, Scrolls oder Aktualisierungen müssen pausierbar, stoppbar oder ausblendbar sein (WCAG 2.2.2), wenn sie:

• Länger als 5 Sekunden dauern
• Parallel zu anderen Inhalten dargestellt werden

Karussells & Slider Soll

Automatisch rotierende Karussells sollen vermieden werden. Falls eingesetzt:

• Pause-Button bereitstellen
• Bei Hover und Fokus automatisch pausieren
• Navigation mit Tastatur ermöglichen