User engagement can greatly benefit from the use of animations on the web. Check out Apple’s home page for a short illustration: As you scroll, the page’s content changes, drawing your attention to the features of different products seamlessly.
Naturally, “seamless” can be interpreted in several ways. It’s possible that those who have trouble seeing or remembering details online may prefer a more stripped-down page design, and that those who rely on assistive technologies would avoid visiting sites that overly rely on animations.
Web animations may, thankfully, be made more accessible if designers take users’ actual situations into account. Our goal in this piece is to help you make animations that adhere to the standards set out by the Web Content Accessibility Guidelines (WCAG) and are therefore accessible to a wider audience.
Table of Contents
5 Tips to make your animations more accessible
1. Avoid animations that are triggered by motion
In most cases, giving viewers additional ways to interact with your material is the greatest approach to making it more accessible. Web animations with a lot of moving parts might be fun, but they can also be harmful for visitors if they aren’t implemented properly.
Developers can use WCAG Success Criterion 2.3.3 for guidance:
According to Success Criterion (SC) 2.3.3, “Animation from Interactions,” of WCAG 2.1, “Motion animation triggered by interaction can be disabled unless the animation is essential to the functionality or the information being conveyed.”
It is important to highlight that WCAG 2.1 SC 2.3.3 is a Level AAA guideline meaning, websites that do not comply with this standard may be regarded to be adequately accessible. Therefore providing a variety of alternatives to your readers will help you cater to the widest possible audience.
2. Avoid repetitive and flashing content
Content that flashes too often may cause seizures in those who are already susceptible to them, not to mention the general annoyance it can cause. Developers can use WCAG Success Criterion 2.3.1 for guidance:
According to WCAG SC 2.3.1, “Three Flashes or Below Threshold,” prohibits websites from containing “anything that flashes more than three times in any one second period.”
The best course of action is to not use any flashing media at all since this success criteria only applies to viewports larger than a particular threshold. Since visitors are currently on your site, you have their full focus; don’t confuse them with confusing design choices.
Provide a content notice and disable playback if flashing material is required (for example, if your site has video of firecrackers, lightning strikes, etc.). Make it such that by default the media only fills a fraction of the user’s screen.
Websites that do not meet WCAG SC 2.3.1 cannot be regarded to be moderately accessible since this success criterion is a Level A requirement.
3. Provide users an option to control the content playback
Content that changes, blinks, scrolls, or auto-updates with new information must include a way to pause, halt, or conceal the change, as described in WCAG 2.1 Success Criterion 2.2.2, “Pause, Stop, Hide.”
If you follow this guideline, you’ll make it easier for people with visual impairments, attention deficits, and certain neurocognitive conditions to access your site. For the most part, online animations that end their motion within five seconds will meet this criterion.
Some animations (such as those used to demonstrate a product) may need more time. A pause button and other controls to manage playback would be useful in these situations.
4. Provide keyboard support
You should test online sites containing web animations to make sure they perform consistently since many web users explore the internet using just a keyboard. Use the Tab and Shift+Tab keys to navigate a page and interact with the elements present.
Here are some common questions you need to implore while testing for keyboard accessibility:
- Are you able to access every button, menu, and link in the video player?
- Do you have a clear idea of where the emphasis on your keyboard should be or are you lost?
- Does the focus of the keyboard get “stuck” while waiting for an animation to finish playing?
5. Focus on the End Users When Designing
Carefully crafted animations may be a very effective medium for reaching your audience and keeping their attention throughout the information you’ve created for them. With this knowledge at our disposal, we can steer clear of the trap of building animations that, despite their clever application, end up distracting, confusing, or frustrating the user. Keep in mind that if your visitors feel at home on your website, they will spend more time exploring the site, giving us a better chance to leave an impression.
In a nutshell
Here are some pointers to keep in mind while using animations on your website:
- Avoid animations that have varying rates of movement for the foreground and backdrop.
- Monitor the color scheme of your website and refrain from utilizing it as the exclusive means of communication.
- Make sure your content loads properly and your animations play as planned across a variety of devices.
- Avoid using looping animations. To the extent that you can, you should turn off animations by default. If you must use them, a short number of cycles is preferable.
Feel free to contact AEL Data, if you would need assistance with animation accessibility or a review of the accessibility of your website.
