Sec-CH-Prefers-Reduced-Motion header

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

The HTTPSec-CH-Prefers-Reduced-Motionrequest header is auser agent client hint which indicates the user agent's preference for animations to be displayed with reduced motion.

If a server signals to a client via theAccept-CH header that it acceptsSec-CH-Prefers-Reduced-Motion, the client can then respond with this header to indicate the user's preference for reduced motion. The server can send the client appropriately adapted content, for example, JavaScript or CSS, to reduce the motion of any animations presented on subsequent rendered content. This could include reducing the speed or amplitude of movement to reduce discomfort for those with vestibular motion disorders.

This header is modeled on theprefers-reduced-motion media query.

Header type	Request header,Client hint
Forbidden request header	Yes (`Sec-` prefix)

Syntax

http

Sec-CH-Prefers-Reduced-Motion: <preference>

Directives

<preference>: The user agent's preference for reduced-motion animations. This is often taken from the underlying operating system's setting. The value of this directive can be eitherno-preference orreduce.

Examples

Using Sec-CH-Prefers-Reduced-Motion

The client makes an initial request to the server:

http

GET / HTTP/1.1Host: example.com

The server responds, telling the client viaAccept-CH that it acceptsSec-CH-Prefers-Reduced-Motion. In this exampleCritical-CH is also used, indicating thatSec-CH-Prefers-Reduced-Motion is considered acritical client hint.

http

HTTP/1.1 200 OKContent-Type: text/htmlAccept-CH: Sec-CH-Prefers-Reduced-MotionVary: Sec-CH-Prefers-Reduced-MotionCritical-CH: Sec-CH-Prefers-Reduced-Motion

Note:We've also specifiedSec-CH-Prefers-Reduced-Motion in theVary header to indicate to the browser that the served content will differ based on this header value, even if the URL stays the same, so the browser shouldn't just use an existing cached response and instead should cache this response separately. Each header listed in theCritical-CH header should also be present in theAccept-CH andVary headers.

The client automatically retries the request (due toCritical-CH being specified above), telling the server viaSec-CH-Prefers-Reduced-Motion that it has a user preference for reduced-motion animations:

http

GET / HTTP/1.1Host: example.comSec-CH-Prefers-Reduced-Motion: "reduce"

The client will include the header in subsequent requests in the current session unless theAccept-CH changes in responses to indicate that it is no longer supported by the server.