Sec-CH-Prefers-Reduced-Motion
=============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`Sec-CH-Prefers-Reduced-Motion`** user agent client hint request header indicates the user agent's preference for animations to be displayed with reduced motion.

If a server signals to a client via the `Accept-CH` header that it accepts `Sec-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 the `prefers-reduced-motion` media query.

|  |  |
| --- | --- |
| Header type | Request header,
 Client hint |
| Forbidden header name | yes |

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 either `no-preference` or `reduce`.

Examples
--------

The client makes an initial request to the server:


```http
GET / HTTP/1.1
Host: example.com
```


The server responds, telling the client via `Accept-CH` that it accepts `Sec-CH-Prefers-Reduced-Motion`. In this example `Critical-CH` is also used, indicating that `Sec-CH-Prefers-Reduced-Motion` is considered a critical client hint.


```http
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
```


**Note:** We've also specified `Sec-CH-Prefers-Reduced-Motion` in the `Vary` 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 the `Critical-CH` header should also be present in the `Accept-CH` and `Vary` headers.

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


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


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

Specifications
--------------

| Specification |
| --- |
| User Preference Media Features Client Hints Headers # sec-ch-prefers-reduced-motion |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Client hints
* `prefers-reduced-motion` CSS Media Query
* User-Agent Client Hints API
* Improving user privacy and developer experience with User-Agent Client Hints (developer.chrome.com)
* `Accept-CH`
* HTTP Caching > Vary and `Vary`