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 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 ‘prefers-reduced-motion’.
The code for it is pretty simple, as it only has two options:
- ‘reduce’
- ‘no-preference’
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 Michelle Barker at Smashing Magazine has an excellent post that digs into some simple examples.
Users
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.
- In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
- In macOS: System Preferences > Accessibility > Display > Reduce motion.
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.
