Accessible video design

Principles of accessible video

To make video accessible:

1. Caption all audio content #

Captions help people who are deaf or hard of hearing understand audio and video.

But they also help many more people who may not have an impairment, not everyone wants to have the audio on especially if you're in a noisy or quiet place.

Captions need to be shown at the same time as the audio, and should identify who is talking, it can also include background extra sound or music, all of which need explaining. If there is no sound on the video, then this should be described as well.

Providing captions can take a long time to add, you may be thinking about speeding up the process by using autocaptioning features, but don’t. Because autocaptioning attempts to guess what is being spoken, it isn’t particularly accurate if there is a lot of background noise or the dialogue features accents.

Autocaptioning cannot be relied upon for accurate captioning and the likelihood of mistakes is high. YouTube provide a do-it-yourself page which explains how to add subtitles and closed captions to video you've created link opens external website.

A good feature is YouTube community contribution link opens external website where you can encourage your followers to add captions and transcripts for you.

2. Have a text transcript #

Transcripts benefit many people and provide a convenient way to understand a video without having to watch.

A transcript provides a description of everything happening in the video, not just people speaking. It needs to be provided alongside the video such as a link to another page, be easy to reach and be in a format which is itself accessible.

When you're deciding on appropriate file formats for the transcript always choose HTML, as it doesn’t require any extra software to view and it has the benefit of being able to be read via assistive technologies easily when it is marked up correctly.

Whilst other formats like Microsoft Word are ok, be mindful that not everyone has Microsoft Word installed and they may need to download a viewer, the more barriers in place for a user the less likely they are to use your transcripts.

3. Make sure the video doesn’t flash repeatedly #

Video content that flashes or has repeating bold patterns can cause seizures in people who are photosensitive.

If the video flashes and you can't alter it easily, ensure users are warned during the lead up to the section in the video and prior to playing on the webpage, allow them the option to decide whether they wish to watch.

A now infamous episode of Pokemon featured flashing content link opens external website which resulted in over 650 children being taken to hospital.

4. Have a separate audio description #

Describing what is happening in a video can be just as important as the dialogue.

An audio description explains what is happening on screen and can include physical actions, costumes and the scene. This lets vision impaired users understand all visual information and follow along with the story.

Not every video though will need a separate audio description, if there are long sequences of music or an animation with no dialogue, then a separate audio description would be required

5. Use technology that's backward compatible #

People may not have the latest browsers which may affect the video player in use, so don’t rely on advanced features.

Decide on the lowest browser version you will support and test to that version. See if it supports the accessibility features listed here.

There is nothing wrong with providing advanced video players and experiences, but use progressive enhancement to deliver the most basic content first, then enhance the experience if the technology supports it. In addition, test the video player on mobile devices, because iOS and Android operating systems may not support all the features.

6. Do not autoplay videos #

Videos which automatically play when the page loads are disruptive for all people.

They are particularly disorientating for people using screen readers, and people with attention deficit disorders.

The automatically playing video will drown out the audio from the screen reader, and if the person cannot hear the screen reader, they can't find how to stop the video, and the whole site will quickly become unusable.

If you absolutely cannot avoid autoplaying videos with your content, provide a site wide preference to turn off all automatically playing audio and video.

7. Video controls are keyboard friendly #

Accessible video content can be affected by being played on an inaccessible video player.

If the player doesn’t allow a person to play video via the keyboard only, no matter how much accessibility support is provided within the video content, it will be inaccessible because of the player.

Some video players may not support captions or audio descriptions, and some may have a keyboard trap which stop the keyboard focus moving beyond the player.

When choosing a video player make sure all options are keyboard accessible, are the basic features of the video player able to be triggered from the keyboard.

Can you play and stop the video and are the controls in a tab order which makes, can you increase and decrease the sound. Do you have the same ability with a keyboard as you do with a mouse?

---

Contact us

We have a keen ear for listening. If you have a project you need support with, extra guidance on an accessibility problem or just want to discuss an idea get in touch.

Contact us