Accessible video and animations
Accessible videos ensure equal access, improve usability for everyone, and help you share your message more effectively. Without accessibility features, many people are excluded.
Captions and subtitles both show spoken words as text on screen. Captions show what is said and what is heard and provide more description such as noises, like music playing or a doorbell being rung. Subtitles show only the words that are spoken. Captions are considered more accessible.
- Captions and subtitles help people who are deaf or hard of hearing, people with autism and dyspraxia, as well as those who watch videos without sound on public transport or in a noisy environment.
- Clear audio and audio descriptions help people who are blind or have low vision
- Clear language and structure make information easier to follow and reduce cognitive load.
Creating accessible animations is important because animations, while visually appealing, can unintentionally exclude or harm some users. People with vestibular disorders, ADHD, and autism, may find fast, looping, or complex animations disorienting or overwhelming. Accessible animations help ensure most people can use and enjoy your content.
It is important to note that British Sign Language (BSL) videos are very important for many deaf people in the UK. BSL is a full language with its own grammar and rules.
For many deaf people, BSL is their first or main language. Not all deaf people find written English easy to read. Captions and transcripts may still be hard for this audience to understand. BSL videos remove this barrier.
Tips to create accessible videos
1. Add captions
- Provide accurate captions for all spoken words
- Include important non‑speech sounds (for instance [music], [laughter], [door slams])
Tips
- Use closed captions so users can switch them on and off
- Avoid placing captions over important on‑screen text
- Review auto‑generated captions as they are rarely accurate enough
2. Provide a transcript
A transcript is a text version of all audio content.
What to include
- Spoken dialogue
- Speaker names (if multiple people)
- Meaningful sound effects
- Brief descriptions of important visuals
3. Ensure accessible audio
- Use plain language
- Avoid unnecessary jargon
- Explain acronyms when first used
- Keep sentences concise Speak clearly and at a moderate pace
- Minimise background noise
4. Include audio descriptions
Audio description explains important visual information that isn't spoken.
Examples
- On‑screen text
- Actions that change meaning (for instance "She nods yes")
- Facial expressions such as "He smiles"
- Contextual information such as "The two women are in a busy café sat at a table", or actions such as "The door opens and a man walks in"
- Charts, diagrams, or demonstrations
5. Use clear, accessible visual design
- Use high contrast between text and background
- Keep text large enough to read on small screens
- Use simple, readable fonts
- Allow enough time to read on‑screen text
What to avoid
- Flashing content (this can cause seizures)
- Conveying meaning by colour alone (for instance 'red = bad')
- Overly busy or cluttered visuals
6. Make the video player accessible
Avoid autoplay and ensure the platform or player supports:
- Keyboard navigation (play, pause, volume, captions)
- Screen reader compatibility
- Caption controls
- Playback speed control
Most major platforms (YouTube, Vimeo, Microsoft Stream) already support this, but only if captions and metadata are set up properly.
Tips to create accessible animations
1. Avoid excessive motion and flashing
Some people experience dizziness, nausea, or migraines from animation.
We advise against using flashing as it causes serious problems with understanding and reading information, and people with visual impairment, epilepsy, cognitive difficulties, and deaf people struggle with it. If flashing is included:
- Never flash more than 3 times per second
- Avoid high-contrast flashes (bright white on black)
- Be very careful with strobe-like effects
2. Provide a way to pause, stop, or disable animation
Users must be able to control animations. Provide pause or stop buttons for animated content.
This is especially important for:
- Auto-playing carousels
- Background animations
- Animated infographics
3. Make animations understandable without seeing them
Animations should not be the only way information is conveyed.
- Pair animations with text explanations
- Use captions or labels
- Ensure the same information is available in static form
