HTTP Sec-CH-Prefers-Reduced-Motion Header

Der HTTP-Header Sec-CH-Prefers-Reduced-Motion ist ein Request-Header aus den User Agent Client Hints, der anzeigt, ob der Nutzer minimierte Bewegungen und Animationen bevorzugt. Dies ist eine wichtige Barrierefreiheitsfunktion für Menschen mit vestibulärer Störung oder Bewegungsempfindlichkeit.

Typ

Request-Header

Syntax

Der Header gibt die Animations-Präferenz als einfachen String-Wert an.

http 
Sec-CH-Prefers-Reduced-Motion: reduce
Sec-CH-Prefers-Reduced-Motion: no-preference

Direktiven

Die Direktiven definieren die Bewegungs- und Animationspräferenz des Nutzers.

no-preference
Nutzer hat keine spezielle Präferenz bezüglich Animationen. Standard-Wert, wenn keine Betriebssystem-Einstellung aktiv ist. Volle Animationen können verwendet werden.
reduce
Nutzer hat "Bewegungen reduzieren" in Betriebssystem-Einstellungen aktiviert. Animationen sollten minimiert oder durch statische Alternativen ersetzt werden.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den Sec-CH-Prefers-Reduced-Motion-Header.

Beispiel 1 Reduzierte Animationen anfordern

http 
GET /homepage HTTP/1.1
Host: shop.example.com
Sec-CH-Prefers-Reduced-Motion: reduce
Accept-CH: Sec-CH-Prefers-Reduced-Motion

Browser sendet Präferenz für reduzierte Bewegungen, Server liefert CSS ohne aufwändige Keyframe-Animationen oder Parallax-Effekte.

Beispiel 2 Standard Animationen erlaubt

http 
GET /gallery HTTP/1.1
Host: portfolio.example.com
Sec-CH-Prefers-Reduced-Motion: no-preference

Nutzer ohne Bewegungsempfindlichkeit erhält volle Animations-Experience mit Transitions, Transforms und Scroll-Effekten.

Beispiel 3 Serverseitige CSS Anpassung

http 
HTTP/1.1 200 OK
Accept-CH: Sec-CH-Prefers-Reduced-Motion
Vary: Sec-CH-Prefers-Reduced-Motion
Content-Type: text/html
Link: </styles/reduced-motion.css>; rel=stylesheet

<style>
  * { animation-duration: 0.01ms !important; }
</style>

Server liefert spezialisiertes Stylesheet, das alle Animationen auf Minimum reduziert für barrierefreie User Experience.

Accessibility Flow

Reduced Motion Client Hint Ablauf

Vorteile für die Systemarchitektur

  • WCAG 2.1 Konformität: Erfüllt Success Criterion 2.3.3 Animation from Interactions für Level AAA Barrierefreiheit
  • Performance Optimierung: Nutzer mit reduce-Präferenz benötigen keine schweren Animation-Libraries, reduziert JavaScript-Bundle-Size
  • Medizinische Rücksichtnahme: Verhindert Übelkeit und Schwindel bei Nutzern mit vestibulärer Störung, Migräne oder Epilepsie

Spezifikation

User Preference Media Features Client Hints Headers https://wicg.github.io/user-preference-media-features-headers/

Weitere Spezifikationen

Sec-CH-Prefers-Color-Scheme Header, Accept-CH Header