Animations for everyone
We get video and animated messages every day on the web and in our various social channels. Movement arouses the user's interest and can convey a feeling in a completely different way than a static image or text. Animations can also be a good way to offer an alternative way for the user to access information. We are all different and prefer the content presented in different ways.
Here are three tips on inclusive thinking when it comes to animations:
1 Offer options
Make sure the same information is presented both visually and with sound in your animation so more people can get hold of your message. Visually impaired users need to have what is seen but not heard in the animation explained in words, through so-called audio description. This is essentially a speaker that can tell what happens ("the door opens") but also read text written in the animation. Getting the text in the animation read out aloud can also make it easier for people with reading difficulties. Let the emotion and expression you use visually be mirrored in the sound by choosing the speaker voice with care and reinforcing the feeling with music or subtle sound effects. However, make sure that the background sound does not interfere with the spoken sound.
Text animation is necessary for people who cannot hear to be able to access the content, and it can also be an extra support for, for example, people with another native language. Texting the film also facilitates situations when, for various reasons, we cannot use the audio, for example if we are sitting in a public environment such as in a café or on a bus.
2 Use sufficient contrasts
Having good contrasts in the animation not only helps people with visual impairment access the content, but is also good for mobile viewing. Often we use the mobile outdoors or in changing light conditions, where we may experience the same difficulties in perceiving the information on the screen as if we had a visual impairment. Therefore, make sure that the contrasts of text and important graphic elements are sufficient. Aim for a contrast value over 4.5: 1 for text and 3.0: 1 for graphics. You can easily control the contrasts with different tools yourself. One example is the Colour Contrast Analyzes from Paciello Group, which is free to download and use.
Colour Contrast Analyzer, opens in new window
3 Think about the tempo
Ensure that your animation has a decent pace for the user to perceive and absorb the content. If you use text in the animation, you need to make sure that the text is presented long enough for people with reading and writing difficulties and another native tongue to read it. If you are not sure how long a text needs to remain, why not test with users? Get help from a colleague or friend who is watching the movie for the first time, do they have the time to read and understand the message? Try to use short, heartfelt messages in animations, making it easier for everyone!
Allow the user to pause the animation. It's also good if the animation stops by itself after a few seconds. For people with cognitive disabilities, it can create nausea and motion sickness with moving objects. If the animations contain flashes more than three times per second, it can trigger epileptic seizures. So please stay out of it.
What success criteria and requirements are linked to animations?
WCAG 2.1 AA:
1.2.1
1.2.2
1.2.3
1.2.5
1.4.1
1.4.2
1.4.3
1.4.11
2.2.2
2.3.1