Accessibility guidelines for animation

People often get confused between subtitles and captions. Subtitles only show spoken words, whereas captions describe spoken words and important sounds.

There are two types of captions: open and closed. Open captions are embedded in the video and cannot be turned off. Closed captions are not embedded and can be turned on and off by the viewer.

Keep captions centred, at the bottom of the screen and always in the same place.

Use a large, clear font on a contrasting background.

Break them at logical points and don’t show more than two lines at once.

Adding the names of the characters in your captions can be helpful if you’re not using motion graphics to identify the subjects, or when it’s not clear who’s talking.

Names should be displayed in sentence case followed by a colon, or in square brackets.

• Monologue: add the character’s name when they first speak. You don’t need to repeat it thereafter.
• Dialogue: start the caption with the character’s name throughout the video so the viewer knows who’s speaking. Use different colours for each character.
• Voiceover: if you add the name of the subjects in your video, you should also identify in the captions if the audio is from a voiceover.

Make sure people understand which language is being spoken.

If the majority of your animaiton is in a single language, but other languages are also used, insert the language being spoken in square brackets at the start of the caption.

For example: [In Punjabi]

Provide a meaningful description of any music and sound that is part of the action, significant to the experience and essential to successfully communicate your message.

Instead of just writing ‘music’, describe what it sounds like. What instruments can you hear playing? Is the tempo upbeat or slow?

Try to be objective when describing the mood as you don’t want to influence the viewer’s experience.

Any video that contains text on screen should always include a voiceover to ensure it is accessible for people who may not be able to read the text.

When producing a voiceover, it is good practice to:

• Speak clearly and enunciate.
• Make sure the sound quality is good. Avoid muffled voiceovers that contain too much background noise.

Sound is important for telling a story. The music you choose should complement the message, support the tone of the story and be appropriate for the target audience.

• Music with vocals can be distracting and add another level of information that viewers will need to process.
• Sound effects should have a practical purpose. For example, include a ‘click’ sound if you’re showing a cursor clicking a button.
• The volume of the soundtrack and sound effects should be loud enough for viewers to hear but should not overpower the audio from your footage or voiceover. Viewers need to clearly hear the voices over the soundtrack and background audio.

An audio description is another way of conveying what’s on screen to viewers who are unable to see the footage clearly.

It’s an additional voiceover (narration/commentary) that explains what’s happening on screen. It should describe body language, expressions, movements and anything that’s happening in the video.

Depending on how the script flows, a video can be paused at natural points and the screen frozen to add additional voiceover that describes the visual information.

Avoid animations that cause the foreground and background to move at different speeds.

This can be disconcerting for viewers, particularly people with visual impairments or neurodiverse conditions.

Allow viewers enough time to understand what’s in the shot, listen to the voiceover and read the captions.

All text should appear on screen for the amount of time it takes to read it twice.

• Give people enough time to read the text and process the movement, if using text motion graphics.
• Slow motion and time-lapse can highlight elements of the story.

A transcript is a text alternative to a video, containing dialogue, descriptions of actions, and information that the viewer would get from viewing the screen.

It provides an alternative way for people to access and understand your video content.

The transcript should be presented with the video so it’s easy to find: the text could be pasted directly beneath a video on YouTube, or you could provide a link to a separate web page or PDF.

If for any reason the animated video doesn’t work with captions, then offering a transcript is crucial.

Think about whether your target audience would benefit from viewing a signed version of your animated video.

Signed videos are created by filming someone signing the words from the video, then overlaying this footage in the corner of the video.

• Use a form of sign language that is appropriate for your viewers.
• Film the interpreter against a clear background and shoot at a sufficient angle to capture all movements.
• Keep the sign language footage in the same position throughout the video.

Charts and graphs in an animated video must be clearly labelled and should not solely rely on contrasting colours. Use additional patterns or data labels to make it easier for readers to differentiate each piece of data.

People with low vision or colour blindness may find it easier to differentiate segments of a chart or graph if they use contrasting tones and shades. Check the colour contrast of the segments by viewing them in greyscale.

If graphs contain axis labels or other text, make sure the text is large enough to read.

Flashing content in animations should be avoided.

If it is included, it should meet the ‘three flashes or below’ threshold: no content should flash more than three times per second.

Animated videos that contain more than three flashes within a second can provoke seizures in people who suffer from photosensitive epilepsy.

Animation on a web page can be confusing for people if not used in the right way.

Moving content (for example a small, shaking logo; a moving background; or a short, animated cartoon to draw people’s attention) can be distracting and cause people to struggle to focus on reading motionless text that surrounds it. It can be particularly confusing for people with low vision and attention deficit disorders.

Here are some pointers on how to make web animations more accessible:

• Allow users to pause, stop or hide website content that moves, blinks or scrolls.
• Avoid creating animations with a foreground and background that move at different speeds.
• Avoid animations that loop endlessly.
• Provide good contrast between the text and a moving background.
• Avoid flashing animations. They can be irritating for people with photosensitivity, and a series of flashes can trigger seizures.