Set your website to respect prefers-reduced-motion and prevent animation from being displayed.
For example in connection with anchor/jump links.
Add the following CSS media query to the site.
| Code Block |
|---|
@media (prefers-reduced-motion: reduce) {
/* CSS to disable motion goes here */
} |
When the user selects an anchor/jump link the page will smooth-scroll to the content selected, instead of a hard and abrupt jump.
Users can set their OS to indicate their motion preference.
This is supported by Chrome, Safari, Firefox, Edge
The 'prefers-reduced-motion' CSS Media Query will respect that choice.
Please see additional information.
https://www.w3.org/WAI/WCAG21/Techniques/css/C39 Table of Contents
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Overview
Avoid distracting users during their interaction with a web page through animated content.
Users should be provided with a mechanism to stop, pause and hide any animated content.
Content that moves or auto-updates can be a barrier to anyone who has trouble reading stationary text quickly as well as anyone who has trouble tracking moving objects. It can also cause problems for screen readers.
Moving content can also be a severe distraction for some people.
Certain groups, particularly those with attention deficit disorders, find blinking content distracting, making it difficult for them to concentrate on other parts of the Web page.
Please see our guide related to slideshows, moving content and flashes.