Accessibility Elements, Part 5: Captions, Subtitles, Transcripts, and Audio Descriptions in Drupal

Authored by: Nadiia Nykolaichuk.

Multimedia content, such as engaging videos, insightful podcasts, and vibrant images, is meant to captivate, inform, and entertain website users. However, while creating an immersive world of multimedia experiences, it’s necessary to be mindful of the people with a wide range of impairments who need alternative ways to perceive the content. 

When it comes to images, alt text can tell users what the specific image conveys. But for video and audio content, the mission passes on to subtitles, captions, transcripts, and audio descriptions. Using them is one of the best practices for creating accessible content, so they are up next as the main characters of Part 5 in our series on essential accessibility elements. You’ll note that we’ve also paid particular attention to how they can be used on Drupal websites. 

Introduction to subtitles, captions, transcripts, and audio descriptions

Subtitles, transcripts, captions, and audio descriptions ensure that multimedia content can be understood and enjoyed by a diverse audience. They provide textual support for those who have difficulty hearing sounds and, on the contrary, an audial version of multimedia content for those who have vision impairments. In addition, they can also significantly improve comprehension, which might be helpful for users with cognitive issues.

While web accessibility is the primary goal of these elements, their unique ability to make content more understandable can also be super useful for educational purposes or multilingual experiences. That’s because the information can be perceived in various formats and provided in different languages.

Subtitles

Subtitles are a textual representation of spoken dialogue in a video file. They are usually displayed at the bottom of the screen (however, this may vary) and synchronized with the audio. Subtitles ensure that everyone, regardless of their hearing ability, can follow and comprehend the dialogue or narration.

Captions

Captions are similar to subtitles but also include information about non-verbal elements such as music, various sound effects, speaker identification, and more. This provides a more comprehensive representation of the sounds in a video. In the context of captioning platforms and tools, the terms “captions” and “subtitles” are often used interchangeably.

There are two main types of captions: open captions and closed captions. 

• Open captions are permanently embedded in the video file. They cannot be turned off or customized by the user. They are part of the video itself and are always displayed when the video is played.
• Closed captions are captions that can be turned on or off by the user based on their preferences. Closed captions offer more flexibility, enabling viewers to customize their experience.

Transcripts

Transcripts are a comprehensive written record of all spoken words and other relevant audio elements in a video or audio file. They offer a textual representation of the entire content, including dialogue, narration, and non-speech sounds. Unlike subtitles and captions, which are designed to run synchronously with the media playback, transcripts are often provided as a standalone document. Transcripts are beneficial for a broad range of users, including those with auditory impairments, those with cognitive disabilities, and people who prefer reading over listening (or reading while listening).

Audio descriptions

Audio descriptions, also known as video descriptions or described video, are narrated descriptions of the visual elements in a video. These descriptions provide information about actions, scenes, and other visual content that may not be apparent through dialogue or sound effects. Audio descriptions are typically provided as a separate audio track or file. Users can choose to enable or disable audio descriptions based on their preferences.

Examples of popular tools for creating accessible multimedia

• YouTube Studio

YouTube Studio enables content creators to add subtitles and closed captions to their videos in various languages, or edit the existing ones. You can enter the text manually or upload a file and sync it with the video. There is the automatic captioning feature at YouTube that uses machine learning algorithms.

• CapScribe 3

CapScribe 3 is a tool for adding captions and audio descriptions for video content. The caption mode provides various editing features and controls. Voice recordings can be live or use various synthetic TTS (text-to-speech) voices.

• Audacity

Audacity is an open-source audio editing app. While it doesn't primarily specialize in creating audio descriptions, it can be used to record and edit audio files, including those containing audio descriptions.

• Descript

Descript is a platform for creating and sharing videos and podcasts. It is equipped with an innovative tool that automatically transcribes spoken content into written text in 22 languages with flexible editing features. The platform also converts text to speech using AI. 

• Amara Subtitling

Amara is a cloud-based platform that offers subtitle and caption creation services. It supports collaborative editing, providing customizable workflows for review and final approval of subtitles, which is available in premium plans.

• Otter.ai

Otter.ai is an AI-powered transcription tool that provides real-time transcription during meetings. It can record audio, write notes, capture action items, and generate summaries. While being primarily used for meetings, it also supports the upload and transcription of pre-recorded multimedia files.

• Rev

Rev provides speech to text services such as the creation of captions, transcripts, and subtitles. The options include human transcription services from freelancers across the globe and AI-powered transcription. Rev’s speech-to-text APIs can be built into applications. 

• Happy Scribe

Happy Scribe provides both human and AI-powered transcription for audio files and caption generation for video files. It supports 60+ languages.

• Subtitle Edit 

Subtitle Edit is a free, open-source software that enables you to create, adjust, synchronize, and translate subtitle lines. The tool supports 300+ subtitle formats with possible conversion between them.

• Aegisub

Aegisub is another open-source tool specifically designed for creating and editing subtitles. It enables you to translate subtitle files from one language to another, sync a translated script to an audio, put subtitles on a video, correct a subtitle that’s not properly synchronized to the video, and more.

Multimedia accessibility in Drupal

If you have a website built with Drupal, it might be interesting for you to see some ideas and examples of how subtitles, captions, transcripts, and audio descriptions can be used in Drupal for creating accessible video and audio content.

A note on Drupal’s Media system

First off, Drupal core has an amazing Media system that provides consistent and user-friendly ways to use multimedia on your website. The Drupal Media system provides 5 built-in media types: Remote video, Video, Audio, Document, and Image. You can store multimedia in the Media Library to reuse at any time. 

Using the Media system, you can add video and audio items to your website in the following ways:

• embed them directly in CKEditor with the help of the Media Library button
• attach them to content via standalone Media fields

You can find more specific how-tos in our guide to using Drupal’s Media and Media Library.

Pulling remote multimedia with subtitles or captions

Perhaps the most seamless way to add videos with subtitles or captions to a Drupal website is by embedding them directly from third-party multimedia hosts. That’s what is provided by the Remote video media type in Drupal, which is different from the other media types because it doesn’t require file uploads. 

The Remote video media type relies on the modern oEmbed format, so third-party hosts that support it are referred to as oEmbed providers. All you need is to place a link to the multimedia item in Drupal and it gets embedded into your Drupal content pages either inline in CKEditor or via fields. Videos will play just like they do in their original hosts — together with the subtitles or captions they come packed with. 

As you can see on the example below, a video from YouTube shows captions and offers the controls to turn the captions on and off, which is also important for accessibility. Namely, there is the “CC” (“Closed Captions”) button in the right bottom corner provided by YouTube.

If you are embedding videos directly in CKEditor, like in the example, you can adjust the dimensions for the embedded video. These settings are available in Structure > Manage Display > Remote video. Just open the gearbox next to the field for the remote URL and set the maximum width and the maximum height in pixels.

Drupal has an out-of-the-box support for YouTube and Vimeo as oEmbed providers, but it’s possible to add others. Here is where the oEmbed Providers contributed module comes in handy. It has a user-friendly interface for managing the providers, including the options to add custom ones.

A wide range of oEmbed providers can work with Drupal (Soundcloud, Spotify, Flickr, Dailymotion, TED, and many others). The oEmbed standard is designed to support various types of media, not just video. That’s why the Remote video media type in Drupal, despite its video-specific name, can also include audio or other types of multimedia. The embedded content inherits the multimedia accessibility options available on the original platforms, so it’s worth checking their specific features out.

Adding transcripts and audio descriptions to multimedia

As transcripts and audio descriptions are commonly provided as standalone items and don’t need to run synchronously with the multimedia playback, adding them is simpler. The most straightforward way is to add a field of the corresponding format to your content type or media type for attaching transcripts or audio description files.

Based on your website's design and user experience goals, you can use numerous other solutions for placing transcripts and audio descriptions. For example, you can use an accordion tab, a show/hide toggle, dynamic loading upon request, and so on.

Adding non-remote multimedia

As far as multimedia of the Video and Audio media types in Drupal, they are not pulled from third-party services but need to be uploaded to the website. Just like with remote video, local video and audio can either be embedded in CKEditor or added to content as fields.

Local Video and Audio media items can be equipped with captions and subtitles as well. If the multimedia items already contain embedded captions or subtitles, they can be uploaded to Drupal with them. Otherwise, additional steps will be needed like adding a captions file and making sure it’s properly associated with the multimedia item.

The good news is that this might change in Drupal 11. The Drupal community understands the importance of multimedia accessibility, so there is special work being done on providing authors with tools to manage transcripts and captions/subtitles for Video and Audio media types. As part of the big improvements, audio and video file field formatters are planned to update to include track elements.

While the out-of-the-box support is being worked on, some of the below-described options might be interesting to check out if you are planning to add non-remote video or audio. 

Using HTML5 tags

It’s possible to apply some customization that involves the use of HTML5 tags. The HTML <video> component is used to display a video on a web page. It has a special <track> tag that is helpful for managing the files with subtitles, captions, or other files containing text that needs to be displayed when the media is playing. You can specify the type of element (subtitles, captions, etc.), the language, and the format (WebVTT).

In addition, it’s possible to enable editorial teams to add files with subtitles or captions for multimedia via the corresponding fields that can be added to content structure. 

Third-party integration

Another option is to integrate third-party media players or captioning/transcribing platforms directly with your Drupal website. This can be done either with the help of contributed modules or through custom integration. Drupal provides some contributed modules for media players such as, for example:

• the MediaElement module that integrates the MediaElement.js HTML5 player with Drupal
• the JW Player module that adds the JW Player video management platform to Drupal websites

Final thoughts

Mentioned above are just some key points on how captions, subtitles, transcripts, and audio documents can be used in Drupal. The choice of the specific implementation depends on the type of multimedia you have, how often it is added to your website, and many other factors. It’s great to know Drupal’s multimedia accessibility is growing, so there’s surely an optimal solution for your website.

With this fifth article, we are wrapping up our series on accessibility elements, though, of course, we are aware that accessibility encompasses much more. Hopefully, this has inspired you to improve your website’s accessibility, and, with that, contribute to creating a more inclusive digital environment for everyone. As always, our development team will be happy to give you a hand.