5 Pointers to make your Website Animations Accessible

Pointers to make your Website Animations Accessible

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.

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 

Mark it as decorative

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.

Mark it as decorative

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.

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media

Facebook
Twitter
LinkedIn
Email
Pinterest
Reddit
WhatsApp

Related Blogs

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content