Article Continues Beneath
Tuesday’s article on animations and vestibular problems could have left you questioning what else you are able to do to make your animations accessible. Listed here are just a few sources to start out studying extra about how animation and accessibility can work collectively:
WCAG suggestions
This can be a good place to start out for the fundamentals of accessible animations. In a nutshell, the WCAG has two suggestions that particularly apply to animation. The primary is to offer pause controls for any animation that begins mechanically and performs for greater than 5 seconds. Auto-updating content material and animated carousels may possible fall beneath this class.
The second is to not have any a part of the display flashing greater than 3 times a second. Flashing any a part of the web page above this threshold can danger doubtlessly triggering seizures.
Offering alternate content material
Similar to static content material, there are occasions when offering alternate content material for an animation is a great factor to do. Webacessibility.com’s finest practices for animation provides options on when to offer alternate content material and limiting the variety of occasions or length of animations for assistive know-how.
Making your SVGs accessible
Extra net animation is being accomplished with SVG—and that’s nice information for accessibility. If you happen to embody SVG inline in your net web page, it’s inherently extra accessible than canvas: whereas canvas is just a drawing space, the content material and textual content inside your SVG components may be entry straight by the browser.
Dudley Storey and Léonie Watson have each printed helpful lists on learn how to make SVGs accessible in a wide range of contexts. You too can assign ARIA roles to SVG components for extra descriptive energy. The a11y mission has a useful primer on ARIA roles to get you began.
Extra on vestibular problems
Marissa Christina does a beautiful job describing what it’s prefer to reside with a vestibular dysfunction in her interview on The Huge Net Present. Her website, Abledis, is stuffed with nice insights and knowledge as nicely. (The part on movement warnings hasn’t been up to date in awhile, however plenty of perception may be gleaned from the feedback.)
Additionally, Greg Tarnoff has proposed utilizing particular Twitter hashtags to warn others of doubtless triggering hyperlinks.
These are all helpful sources to verify alongside the way in which to make sure you’re making your animations accessible. When you have any related sources that you just use, please share them within the feedback!