Animations and Accessibility (A11y)! ๐
ย
Hi, *|USERNAME|*!
A common topic that I like to write about is animations and how we can all build cooler, better, and more performant ones using HTML, CSS, and JavaScript. Today, I'd like to add one more modifier to the animations we build. That modifier is accessible. There are a number of users for whom animations trigger a negative, health-related response. To quote simplyaccessible:
Depending on the type of animations you use, you could trigger an attack that causes the user to suffer mild to severe vertigo, nausea, headaches or even seizures. People with cognitive issues could become confused and distracted from your content and unable to proceed to the goal of the site.
Given the severity of the problem some of our users might face when seeing animations, what are we to do? Should we simply avoid using animations altogether?
The answer is not quite as complicated as we might imagine. The various operating systems have led the way where they provide accessibility settings that users can use to reduce animations.ย For example, this is what the UI for reducing animations on macOS looks like:
What we can do as web developers is respect the accessibility setting set by the user and reflect that in the animations we show...or not show. The technical details for doing so do get a little crazy, but I have simplified all of it in the Toggling Animations On and Off tutorial. If you create animations for the web, do take a moment to read through it and ensure you provide an accessible experience to users who would prefer not to see (or just see a less intense version of) your animations. It's a small amount of effort for us, but it could make a world of difference in how usable your content is to a segment of your users.
TILL NEXT TIME!
As always, before I leave you to it,ย I would love to hear from you on thingsย I can do better, topics you'd like me to write about, and more. Don't be shy!ย The easiest way to contact me is viaย Twitterย or by posting on the forumsย (be sure to pick out a cool username just like you did when MySpace was all the rage!)
Cheers,
Kirupaย ๐