HTTP Headers

Sec CH Prefers Reduced Motion

HTTP Header

Experimental: This is an experimental technology
Review the Browser compatibility table carefully before deploying this in production environments.

Secure context: This feature is accessible only within secure contexts (HTTPS), and may be supported in some or all browsers.

The HTTP <code>Sec-CH-Prefers-Reduced-Motion</code> request header is a user agent client hint that indicates the user’s preference regarding reduced motion for animations.

If a server signals support for this feature via the <code>Accept-CH</code> header, the client can respond with this header to communicate the user’s preference for less motion. The server can then deliver content optimized for reduced motion, such as tailored JavaScript or CSS, to enhance user comfort. This may involve decreasing the speed or magnitude of animations, particularly helpful for users with vestibular motion disorders.

This header is inspired by the <code>prefers-reduced-motion</code> media query.

The header type falls into the category of Request header and Client hint. It is a forbidden request header when prefixed with Sec-.

Syntax

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

Directives

The user agent’s preference for reduced-motion animations. This setting is typically derived from the operating system’s preferences. The value assigned to this directive can be either no-preference or reduce.

Example

The client begins by sending an initial request to the server:

GET / HTTP/1.1
Host: example.com

The server responds, informing the client through the Accept-CH header that it accepts Sec-CH-Prefers-Reduced-Motion. In this response, Critical-CH is also used, indicating that Sec-CH-Prefers-Reduced-Motion is a critical client hint.

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Reduced-Motion
Vary: Sec-CH-Prefers-Reduced-Motion
Critical-CH: Sec-CH-Prefers-Reduced-Motion

The client then automatically retries the request (because Critical-CH was specified), this time indicating a user preference for reduced-motion animations via the Sec-CH-Prefers-Reduced-Motion header:

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

In subsequent requests within the same session, the client will include this header unless the Accept-CH response header indicates that the server no longer supports it.

How to Modify Header using Requestly

Requestly is a handy Chrome extension that helps you modify HTTP headers, including the Sec-CH-Prefers-Reduced-Motion header. This can be especially useful when testing how your website or app responds to user preferences related to motion reduction. Steps to Modify the Sec CH Prefers Reduced Motion Header:

Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter Sec-CH-Prefers-Reduced-Motion.
- In the “Header Value” field, enter your desired value (e.g., reduce or no-preference).
Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-site.com/*).
Save the rule.

After setting this up, Requestly will inject the modified Sec-CH-Prefers-Reduced-Motion header into all matching requests, letting you test how your site or app behaves for users who prefer reduced motion. Modifying this header is important to ensure your website respects users’ preferences for less motion, which can help reduce discomfort or motion sickness. It allows developers to verify that their animations and transitions adapt properly based on user settings.