TetraLogical

An inclusive approach to video production

Some people find accessing audio or visual content in video challenging or impossible; for this reason, providing alternatives is a requirement of the Web Content Accessibility Guidelines (WCAG) 2.1. It is a common belief that producing alternatives are expensive and time-consuming. This can be the case when accessibility is not considered at the planning stage of video content.

This article describes an inclusive approach to video production that allows you to create accessible videos without expensive add-ons.

WCAG 2.1 requirements

WCAG 2.1 includes a number of requirements around multimedia content. In order to comply with WCAG, videos on your websites and mobile apps must have the following:

A commonly used approach

A common approach by many companies, and individuals, is to produce the video content first, then to send it to an external organisation who generates all the needed alternatives. This approach has a number of significant drawbacks:

A more inclusive approach

The fundamental flaw of the above approach described is that it starts with an inaccessible product (i.e. the initial video content) and tries to build accessibility features on top of it. The final product is likely to be compliant with accessibility requirements but not as accessible and usable as it could be.

A more inclusive approach is to start with a product that is accessible to all, then create different versions of it so that people can choose the one that works best for them. Taking this approach will allow you to produce truly accessible video content, efficiently and at a lower cost.

The steps that make up this process are described below.

Step 1: Write a comprehensive text transcript

Start by writing an accurate and comprehensive text transcript, which includes all information you want to communicate.

Here is the initial transcript we wrote for the Quick accessibility test: Keyboard support video we produced for GAAD 2021. It contains the script, a description of any meaningful visual content, and a few instructions for the benefit of people producing the video (e.g. title and final slides, the URL of the page for the demo, etc.).

Title slide: Quick accessibility test: Keyboard support

Script: Quick accessibility test: Keyboard support. Many people are unable to use a mouse or touch gestures due to limited arm movement and dexterity issues. Instead they may rely on a keyboard, or similar input device, to navigate and operate digital content. To find out if your website is keyboard accessible, load the site and start navigating it by pressing the Tab key on your keyboard. You should be able to reach all actionable controls, such as links, buttons and form fields.

Visual content: A page from the TetraLogical website (https://tetralogical.com/services/) being navigated with the keyboard. All actionable elements receive the keyboard focus in a logical order and the focus indicator is visible around them.

Script: Pressing the Enter key or Spacebar should activate these controls.

Visual content: A link ("Knowledge") on the page from the TetraLogical website is activated with the Enter key and a new page is loaded.

Script: If any actionable element on your website is skipped, receives the focus in an illogical order, or you cannot see where the focus is at any time, then keyboard support is not properly implemented. To find out more about accessibility, visit our website at tetralogical.com

End slide: To find out more about accessibility, visit our website at tetralogical.com

This content is accessible to everybody and, with the exception of instructions, can be published to the website / mobile app as a text alternative for the video content.

Step 2: Include a description of all informative visual content in the audio track

When writing the script, make sure to include a description of any meaningful visual content you are planning to have in your video. You only need to describe visuals that convey important information, such as text displayed on screen, steps demoed in an instructional video, and so on.

You may have noticed how the transcript above contains the text displayed on the title and final slide. This is an example of how easy including information conveyed by the visual content can be.

Title slide: Quick accessibility test: Keyboard support

Script: Quick accessibility test: Keyboard support.

When writing the script for Quick accessibility test: High Contrast mode, we also included a description of the steps to turn on High Contrast mode and Invert Colours settings, which we were going to demo in the video.

If you have a Windows machine, find the High Contrast option under Ease of Access in Settings and turn it on. You can do the same on macOS by selecting the Invert Colors option under Display in the Accessibility settings. At this point, all text except for links should be white on a black background.

Doing this at this stage removes the need of producing an (expensive) audio description at a later stage.

Step 3: Add captions to your video

Once you have produced your video, you will need to add captions. Having your entire script already written, this should only take a few minutes.

Screenshot of the YouTube video player with captions turned on.

Various software and online tools allow you to upload your video and script then automatically synchronise them. You just need to review the accuracy of the captions and timestamps, and make minor adjustments if needed (e.g. breaking long lines of captions into several shorter ones, merging or further separating captions to make it as easy as possible for people to read and understand them).

Here are the guidelines that we follow when adding captions (more detailed ones are available online, such as the BBC Subtitle Guidelines):

For our Quick accessibility tests video series, we used YouTube Studios, which quite accurately matched the text we uploaded with the audio track of our videos. Other tools are available and may be equally effective.

Step 4: Add a text transcript to your page

Now that your video has captions and an audio track containing a description of all meaningful visual content, the only thing for you left to do is to add a text transcript to the page where the video is embedded. This, again, should only take a few minutes. Remove the instructions from the text transcript that you wrote at step 1 of this process, then paste the remaining transcript into your page.

Here is the text transcript we published on our YouTube channel for the Quick accessibility test: Keyboard support video. It is an almost exact copy of the initial transcript we wrote when planning this content; we only removed internal instructions.

Quick accessibility test: Keyboard support

Many people are unable to use a mouse or touch gestures due to limited arm movement and dexterity issues. Instead they may rely on a keyboard, or similar input device, to navigate and operate digital content.

To find out if your website is keyboard accessible, load the site and start navigating it by pressing the Tab key on your keyboard. You should be able to reach all actionable controls, such as links, buttons and form fields.

A page from the TetraLogical website being navigated with the keyboard. All actionable elements receive the keyboard focus in a logical order and the focus indicator is visible around them.

Pressing the Enter key or Spacebar should activate these controls.

A link on the page from the TetraLogical website is activated with the Enter key and a new page is loaded.

If any actionable element on your website is skipped, receives the focus in an illogical order, or you cannot see where the focus is at any time, then keyboard support is not properly implemented.

To find out more about accessibility, visit our website at tetralogical.com

And here is how it looks on the page:

A YouTube page with the above text transcript on it.

If you have a long text transcript, breaking down content into small sections and using headings and lists will improve its readability.

Additional considerations

While this article focuses on alternatives for audio and visual content, a number of additional accessibility considerations must be taken into account in the planning stage of videos. These includes:

The Web Accessibility Initiative (WAI) website has an abundance of information on the above and other accessibility considerations for video content.

Creating accessible video content does not need to be expensive and time consuming; it is all about taking an inclusive approach and considering the needs of all people as early as possible in the planning stage.

Contact us

We like to listen. If you have a project, product, problem, or idea that you want to discuss, get in touch!

hello@tetralogical.com