Posted on Wednesday, 23 June 2021 by Ela Gorla in Design and development

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:

• Captions: Unless the audio track of your videos does not convey information, captions must be provided to give people unable to hear the audio access to it. (Success Criterion 1.2.2 Captions (Prerecorded)
• Audio description: When the visual content of videos communicates information not in the audio track, you must also include an audio description. This can be added in the natural pauses of the audio track, or in extended pauses specifically created for the audio description. (Success Criterion 1.2.3 Audio Description or Media Alternative and Success Criterion 1.2.5 Audio Description (Prerecorded))
• Text transcript: Finally, providing a text transcript is essential to make the content available to people who are deafblind. It also benefits people who prefer to consume content at their own pace or find written text easier to understand than video content. The text transcript must include both the audio track and a description of any meaningful visual content. (Success Criterion 1.2.3 Audio Description or Media Alternative and Success Criterion 1.2.8 Media Alternative (Prerecorded))

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:

• It is expensive: The costs of getting captions, audio description and text transcripts from a third-party can be high
• It is time consuming: It is not unusual for companies to take several weeks to create the alternatives
• The alternatives may not always be equivalent: In order to provide a comparable experience to all people, it is fundamental that the alternatives provide equivalent information to the original video content. When audio descriptions and text transcripts are produced by a third-party, there is a risk that the messages the video content conveys are partially lost

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.

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):

• Start and end captions exactly where the audio starts and ends
• Have a maximum of 2 lines
• Do not include more than 30 characters per line
• If you can, break lines where you have a punctuation mark (full stop, comma, etc.). When you must break lines at other points, do not break them in between:
  • a person’s first and last name, or title and name
  • a conjunction (e.g. "and") and the following word
  • an article (e.g. "the", "a", "an") and the following noun
  • an auxiliary (e.g. "could", "have", "must") and the following verb
• Spell out numbers from 1 to 10 ("one", "two", etc.), use digits for larger numbers ("65", "1002")
• Include meaningful sound effects in square brackets, in capitals (e.g. "[DOOR SLAMS]")
• For videos containing multiple speakers, display their name in capitals (e.g. "ELA: How are you? HENNY: I'm well")
• Ensure that no important visual content is hidden when captions are enabled

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:

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:

• If showing text on screen, choosing colours with a strong contrast ratio with background colours (at least 4.5:1) and a large font size
• Avoiding including fast-flashing content (never have content that flashes more than three times per second)
• When writing the script, use simple language that most people are likely to understand; unfamiliar words, abbreviations and idioms should be avoided

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.

Next steps

Read about adding sign language to video and how our Consultancy service can help you achieve sustainable accessibility.