More Resources for Accessible Animations

来源:互联网 时间:1970-01-01

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 WCAGhas two recommendations that specifically apply to animation. The first is to provide pause controlsfor 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.’s best practices for animationoffers 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 canvasis simply a drawing area, the content and text inside your SVG elements can be access directly by the browser.

Dudley Storeyand Léonie Watsonhave 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 rolesto 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 warningshasn’t been updated in awhile, but a lot of insight can be gleaned from the comments.)

Also, Greg Tarnoff has proposed using specific Twitter hashtagsto 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!