Tuesday’s article on animations and vestibular disorders may have left you wondering what else you can do to make your animations accessible. Here are a few resources to start learning more about how animation and accessibility can work together:
WCAG recommendations
This is a good place to start for the basics of accessible animations. In a nutshell, the WCAG has two recommendations that specifically apply to animation. The first is to provide pause controls for any animation that starts automatically and plays for more than 5 seconds. Auto-updating content and animated carousels could likely fall under this category.
The second is to not have any part of the screen flashing more than three times a second. Flashing any part of the page above this threshold can risk potentially triggering seizures.
Providing alternate content
Just like static content, there are times when providing alternate content for an animation is a smart thing to do. Webacessibility.com’s best practices for animation offers suggestions on when to provide alternate content and limiting the number of times or duration of animations for assistive technology.
Making your SVGs accessible
More web animation is being done with SVG—and that’s great news for accessibility. If you include SVG inline in your web page, it’s inherently more accessible than canvas: whereas canvas is simply a drawing area, the content and text inside your SVG elements can be access directly by the browser.
Dudley Storey and Léonie Watson have both published useful lists on how to make SVGs accessible in a variety of contexts. You can also assign ARIA roles to SVG elements for more descriptive power. The a11y project has a helpful primer on ARIA roles to get you started.
More on vestibular disorders
Marissa Christina does a wonderful job describing what it’s like to live with a vestibular disorder in her interview on The Big Web Show. Her site, Abledis, is full of great insights and information as well. (The section on motion warnings hasn’t been updated in awhile, but a lot of insight can be gleaned from the comments.)
Also, Greg Tarnoff has proposed using specific Twitter hashtags to warn others of potentially triggering links.
These are all useful resources to check along the way to be sure you’re making your animations accessible. If you have any similar resources that you use, please share them in the comments!
Great tips! Thanks!