How to Create Accessible Animations for Your Website?

Animations, when used carefully, can increase engagement on your website and make it more fun and interactive. However, if not used carefully, these animations can cause headaches, dizziness, and other problems for many people with vestibular disorders.

According to the Vestibular.org,

“as many as 35 percent of adults aged 40 years or older in the United States (approximately 69 million Americans) have experienced some form of vestibular dysfunction.”

This means that when you are designing websites and applications, you need to consider the visual needs of these users as well. It does not mean that you cannot use animations on your website at all. No! You definitely can use animations, but with care, so you don’t end up affecting the accessibility of your websites. Make new, beautiful animations and experiences responsibly!

Tips on Creating Accessible Animations for Your Website

Here are some of the ways to create accessible animations for your online platforms and boost online traffic.

1. Relative Size of Motion of Animation

When you are creating accessible animations, do consider the relative size of these animations relative to the viewport. For example, small animations like buttons or CTA that change color won’t create accessibility problems for users. However, animations that cover a lot of screen areas may create issues, so you need to very careful when using them. Therefore, when you are designing accessible animations, always consider the size of their motion to the screen.

The same rule applies when you are designing for mobile interfaces. People will be triggered by animations that have a higher screen ratio. When you are designing for mobile, keep in mind that animations that look small on the desktop screen may cover up the entire screen area on mobile phone or tablet PCs.

2. Duration of Animations

Sometimes your animations end up moving very fast or too quickly, which may create problems for users with accessibility needs. Users who want to process the information presented in the animation will also fail to do so if your animation duration is very less. With CSS, you can control both the duration of the animation and transitions in graphics.

For example, you can use the following to change duration and transitions.

• animation-duration
• transition-duration
• animation-iteration-count

For the animation-iteration-count, you can also set it to infinite, but it is not recommended for accessibility. The following is an example of these codes in use:

div {
     transition-property: width;
     transition-duration: 3s;
}
div{
    animation-iteration-count: 4;
}

So, consider consulting web site design Dubai based experts if you are thinking about enhancing your website accessibility.

3. Parallax Scrolling

Parallax scrolling is when your background and main content moves at different speeds. Think of parallax scrolling as a large-scale animation, i.e., your entire webpage acts like a big animation that may cause accessibility issues. You can use parallax scrolling effects on websites in subtle ways to create depth to your webpage. Parallax is an incredible animation effect when it comes to adding a “wow” factor to your website design. But you need to use it cautiously!

One of the factors that you need to be careful about include “Scroll jacking.” This happens when the scrollbar is created in such a way as to behave independently. It works independently of the user’s intent, which creates a bad experience. Scroll jacking in combination with parallax scrolling renders your website unusable for people with issues like vestibular disorders or migraine as your animations in the background start moving on their own.

4. Enhancing Carousels and Sliders

Another important accessible animation feature that needs your attention is the carousel and slider area. If you want to boost the accessibility of your website, you need to allow a certain degree of control to users when it comes to sliders and carousels. If your sliders lack play, pause, and stop controls, it will create problems for your users that might be interested in the content.

Studies show that only 1% of the users click on a slider and interact with it. This number may seem very low, but you still need to incorporate these people into your audience. When it comes to accessible animations, make sure always to provide more than one way to stop, pause, and play your slider/ carousel. For example, you can use arrows to let the user move slides horizontally, or use traditional play, stop and pause icons below the slider, just like that of media players.

5. Prevent Auto-Playing of Animated GIFs

Animated GIFs are quite popular online, but they can have severe impacts on the accessibility as some users can find it annoying and disturbing, especially if a single web page uses several animated GIFs at the same time. Another alternative of Animated GIF is converting these into HTML videos.

For example, you can convert an animated GIF by using the <video> tag that can be used to convert GIFs into MP4 and WebM. For example, to convert a GIF into MP4, you can use the following HTML:

<video controls width=”200”>
	<source src=”image.mp4” type=”video/mp4”>
</video>

This way, your users will be able to pause animations or have an option not to watch it at all. If you still want to use animated GIFs, you need to consider some factors that reduce its accessibility. These include auto-playing, infinite loop, lack of control, etc. Another important consideration is that GIFs are quite huge in size, which may cause performance issues.

You can also use a JavaScript library called Gifffer to prevent auto-playing animated GIFs. Just add this library to your webpage using <script> tag and use data-gifffer every time instead of src, and you are good to go. If you have trouble with JavaScript elements, consult with Spiral Click, a website design company, and enhance the overall accessibility of your website.

Improve Your Website Accessibility!

A lot of online users are suffering from vestibular disorders and migraine sensitivity, so make sure to consider these users when enhancing the accessibility of your websites. Animations and motions are amazing and visually pleasing, but sometimes they can annoy and even make people ill. Luckily, the web offers a lot of flexibility in terms of design and creativity. So, another crucial aspects of website accessibility are your accessible animation. Make sure to follow these tips and create accessible animations that you users will love to use and keep coming back to your website for a unique user experience.

Learn More:

Top 7 Reasons Your Business Needs an eCommerce Platform