Building websites that are accessible to all users is something that continues to be a problem on much of the web, but it’s continuing to improve over time. For most sites, <a href="https://www.mickmel.com/some-quick-tips-for-an-ada-compliant-website/">some simple steps will get you going in the right direction</a> and put you ahead of most other sites in helping users with disabilities consume your content.

Going beyond accessibility to reduce motion

The code for it is pretty simple, as it only has two options:<ul><li>‘reduce’</li><li>‘no-preference’</li></ul>If the user has no-preference, the website will load normally. However, if their computer is sending the ‘reduce’ directive to your site, you can choose to change how motion behaves.

The relatively new “Media Queries Level 5” specifications that came out last year have a solution specifically for this called ‘

If you’re a user, how do you specify that you want websites to hear your request for ‘prefers-reduced-motion’? When digging into this, I suspected it would be a setting that you adjust in your web browser, but it turns out that it’s setting you change in your operating system.<ul><li>In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.</li><li>In macOS: System Preferences > Accessibility > Display > Reduce motion.</li></ul>

Setting your own directives

<div itemprop="text">Reading Time: 2 min</div>Building websites that are accessible to all users is something that continues to be a problem on much of the web, but it’s continuing to improve over time. For most sites, <a href="https://www.mickmel.com/some-quick-tips-for-an-ada-compliant-website/" dir="ltr">some simple steps will get you going in the right direction</a> and put you ahead of most other sites in helping users with disabilities consume your content.However, there is more that can be done. If you have a site with heavy animation on it, you can do things to help users that have problems with motion on sites, whether it leads to sickness or even seizures. The relatively new “Media Queries Level 5” specifications that came out last year have a solution specifically for this called ‘<a href="https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion" dir="ltr">prefers-reduced-motion’.</a>The code for it is pretty simple, as it only has two options:<UL><LI>‘reduce’</LI><LI>‘no-preference’</LI></UL>If the user has no-preference, the website will load normally. However, if their computer is sending the ‘reduce’ directive to your site, you can choose to change how motion behaves. Digging into that code is beyond the scope of this post, but <a href="https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/" dir="ltr">Michelle Barker at Smashing Magazine has an excellent post</a> that digs into some simple examples.<h2>Users</h2>With that out of the way, it’s worth looking at the other side. If you’re a user, how do you specify that you want websites to hear your request for ‘prefers-reduced-motion’? When digging into this, I suspected it would be a setting that you adjust in your web browser, but it turns out that it’s setting you change in your operating system.<UL><LI>In Windows 10: Settings &gt; Ease of Access &gt; Display &gt; Show animations in Windows.</LI><LI>In macOS: System Preferences &gt; Accessibility &gt; Display &gt; Reduce motion.</LI></UL>I don’t suspect many websites will support this for a while, and many others (like this one) don’t have a need to at all. Still, if you’re building a site with a lot of interactive pieces on it, I recommend you check this out and make some small changes to help out those users that specifically request fewer animations.<h3>Share this:</h3>

I don’t suspect many websites will support this for a while, and many others (like this one) don’t have a need to at all. Still, if you’re building a site with a lot of interactive pieces on it, I recommend you check this out and make some small changes to help out those users that specifically request fewer animations.

Building websites that are accessible to all users is something that continues to be a problem on much of the web, but it's continuing to improve over time. For most sites, some simple steps will get you going in the right direction and put you ahead of most other sites…

Building websites that are accessible to all users is something that continues to be a problem on much of the web, but it’s continuing to improve over time. For most sites, <a href="https://www.mickmel.com/some-quick-tips-for-an-ada-compliant-website/">some simple steps will get you going in the right direction </a>and put you ahead of most other sites in helping users with disabilities consume your content.

However, there is more that can be done. If you have a site with heavy animation on it, you can do things to help users that have problems with motion on sites, whether it leads to sickness or even seizures. The relatively new “Media Queries Level 5” specifications that came out last year have a solution specifically for this called ‘<a href="https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion">prefers-reduced-motion’. </a>

The code for it is pretty simple, as it only has two options:

<ul><li>‘reduce’ </li><li>‘no-preference’ </li> </ul>

If the user has no-preference, the website will load normally. However, if their computer is sending the ‘reduce’ directive to your site, you can choose to change how motion behaves. Digging into that code is beyond the scope of this post, but <a href="https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/">Michelle Barker at Smashing Magazine has an excellent post </a>that digs into some simple examples.

With that out of the way, it’s worth looking at the other side. If you’re a user, how do you specify that you want websites to hear your request for ‘prefers-reduced-motion’? When digging into this, I suspected it would be a setting that you adjust in your web browser, but it turns out that it’s setting you change in your operating system.

<ul><li>In Windows 10: Settings > Ease of Access > Display > Show animations in Windows. </li><li>In macOS: System Preferences > Accessibility > Display > Reduce motion. </li> </ul>

I don’t suspect many websites will support this for a while, and many others (like this one) don’t have a need to at all. Still, if you’re building a site with a lot of interactive pieces on it, I recommend you check this out and make some small changes to help out those users that specifically request fewer animations.

Bite-sized knowledge
to upgrade
your career

Going beyond accessibility to reduce motion

Going beyond accessibility to reduce motion

The relatively new “Media Queries Level 5” specifications that came out last year have a solution specifically for this called ‘

Setting your own directives

IDEAS ABOUT

MORE LIKE THIS

A Look Back at 30+ Years of Website Design

Mortis.com : An Internet Mystery

5 HTML and CSS Good Practices - DZone Web Dev

It's time to

READ

LIKE

A PRO!

Bite-sized knowledgeto upgradeyour career

Going beyond accessibility to reduce motion

Going beyond accessibility to reduce motion

The relatively new “Media Queries Level 5” specifications that came out last year have a solution specifically for this called ‘

Setting your own directives

IDEAS ABOUT

MORE LIKE THIS

A Look Back at 30+ Years of Website Design

Mortis.com : An Internet Mystery

5 HTML and CSS Good Practices - DZone Web Dev

It's time to

READ

LIKE

A PRO!

Bite-sized knowledge
to upgrade
your career