The A List Apart Blog Presents:

More Resources for Accessible Animations

by Val HeadSeptember 11, 2015August 12, 2019

Published in Accessibility, Interaction Design

Article Continues Below

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!

1 Reader Comments

SamTo says:

October 1, 2015 at 5:22 am

Great tips! Thanks!

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Design for Amiability: Lessons from Vienna

by Mark Bernstein

Computing was born in a Viennese café. Between 1928 and 1934, while Hitler plotted and Europe crumbled, a motley crew of mathematicians, philosophers, architects, and economists gathered weekly to puzzle out the limits of reason—and invented Computer Science in the process. What made their collaboration possible wasn't just brilliance (though they had plenty). It was amiability: the careful design of a social space where difficult people could disagree without destroying each other. Longtime A List Apart contributing author Mark Bernstein mines this forgotten history for lessons that might just save today's embattled web from its worst impulses. Spoiler: it involves better coffee service and the looming threat of public humiliation.

Design Dialects: Breaking the Rules, Not the System

by Michel Ferreira

Design systems aren't component libraries—they’re living languages. Rigid adherence to visual rules creates brittle systems that break under contextual pressure. Fluent systems bend without breaking.

An Holistic Framework for Shared Design Leadership

by Michel Ferreira

Having both a Design Manager and a Lead Designer on the same team is beautiful, but can be messy. To make it work without creating confusion, overlap, or “too many cooks,” check Michel Ferreira’s Holistic Framework for Shared Design Leadership.

From Beta to Bedrock: Build Products that Stick.

by Liam Nugent

Building towards bedrock means sacrificing some short-term growth potential in favour of long-term stability. But the payoff is worth it: products built with a focus on bedrock will outlast and outperform their competitors, and deliver sustained value to users over time. Liam Nugent shows us how.

User Research Is Storytelling

by Gerry Duffy

At a time when budgets for user experience research seem to have reached an all-time low, how do we get stakeholders and executives alike invested in this crucial discipline? Gerry Duffy walks us through how the research we conduct is much like telling a compelling story, complete with a three-act narrative structure, character development, and conflict resolution—with a happy ending for researchers and stakeholders alike.