Welcome back! Today, we will discuss an essential aspect of digital accessibility – Guideline 1.2 Time-based Media. This guideline ensures that multimedia content, such as video and audio, can be accessed by all users. In today’s digital world, where video and audio content are prevalent, it is crucial to understand and implement this guideline to ensure equal access for everyone. It is part of the perceivable principle in web accessibility, which means that all information and user interface components must be presented in a way so that all users can perceive them regardless of how they interact with the content. In other words, whether they see, hear, or feel it, the content must be accessible to everyone.
What Is Time-based Media?
Time-based media refers to content that has a duration, such as audio recordings, videos, and animations. Unlike static content such as text and images, time-based media is dynamic and relies on time for its presentation. However, the challenge with time-based media is to ensure that all users, including those who cannot see or hear, have access to the valuable information it conveys.
Understanding Success Criteria Levels
To better understand the requirements for time-based media, it’s important to understand the structure of WCAG’s success criteria (SC), which has three levels: A, AA, and AAA.
- Level A is the most basic accessibility feature and should be included in all web content.
- Level AA, which deals with the most significant and common barriers, is required by law in the United States.
- Level AAA is the highest standard and can be more complex to achieve.
While most organizations in the United States aim for Level A and AA to meet legal and practical requirements, taking into account Level AAA guidelines can help make content even more accessible, resulting in a more inclusive user experience. With these levels in mind, let’s explore how they apply to time-based media in Guideline 1.2.
SC for Time-based Media
Guideline 1.2 has several SCs at different levels that show the degree of accessibility that can be achieved. Although there are criteria at the highest level (AAA), we will concentrate on fulfilling the requirements of Levels A and AA. These standards are usually aimed for and frequently enforced by regulations.
- Level A
- 1.2.1 Audio-only and Video-only (Prerecorded)
- 1.2.2 Captions (Prerecorded)
- 1.2.3 Audio Description or Media Alternative (Prerecorded)
- Level AA
- 1.2.4 Captions (Live)
- 1.2.5 Audio Description (Prerecorded)
- Level AAA
- 1.2.6 Sign Language (Prerecorded)
- 1.2.7 Extended Audio Description (Prerecorded)
- 1.2.8 Media Alternative (Prerecorded)
- 1.2.9 Audio-only (Live)
Level A
1.2.1 Audio-only and Video-only (Prerecorded)
SC 1.2.1 requires content that’s just audio (like a podcast) and video with no audio (like a silent film) to provide alternative methods of conveying information, such as a text transcript for audio tracks or a text description or audio track explaining what’s happening on screen for videos. An exception exists when the audio or video content serves as a media alternative for text and is clearly labeled as such if the content complements or duplicates text already available on the same webpage.
Audio Only Example
A podcast episode about the history of Nancy Drew books is uploaded to your site. Next to the audio file, provide a transcript that users can read.
<audio controls>
<source src="history-of-nancy-drew.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<section>
<h2>Transcript of The History of Nancy Drew Books</h2>
<p><strong>Sarah:</strong> Hey there, welcome back to the podcast!...</p>
<!-- More transcript content -->
</section>Video Only Example
Imagine your blog is previewing an upcoming Nancy Drew video game with a teaser video that showcases gameplay, characters, and key features without any spoken dialogue.
<video controls>
<source src="nancy-drew-game-teaser.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p><a href="nancy-drew-game-teaser-description.mp3">Audio description of video</a></p>1.2.2 Captions (Prerecorded)
All prerecorded audio content in videos must have synchronized captions. This is necessary to ensure that people can access the information through a text that displays in sync with the video. However, if the prerecorded video content is an alternative to text already on the page and is clearly labeled as such, it is an exception to this criteria. It is important to note that captions and subtitles are not the same. Captions are the transcript of the dialog, whereas subtitles translate one language to another.
Captions Example
Imagine creating an instructional video guiding beginners through their first painting using a Paint By Number Kit.
<video controls>
<source src="PaintByNumberInstructional.mp4" type="video/mp4">
<track src="PaintByNumberInstructional-captions.vtt" kind="captions" label="English" default>
Your browser does not support the video tag.
</video>In this setup:
- The ‘controls‘ attribute ensures viewers have the necessary playback controls (play, pause, volume control, etc.)
- The ‘track‘ element links to the caption file (PaintByNumberInstructional-captions.vtt), which contains all the captions synchronized with the video.
Attributes within <track>:
- label: Provides a title for the track, labeled “English,” to indicate the language of the captions.
- kind: Indicates that the track provides captions, as opposed to subtitles or descriptions.
- default: This track is enabled by default, ensuring that captions will automatically be displayed unless the viewer decides to turn them off.
Understanding the WebVTT File:
A WebVTT file contains the captions displayed in sync with the video, allowing viewers to follow along with the instructions visually and textually. Here’s a simplified example:
WEBVTT
00:00:00.000 --> 00:00:05.000
Welcome to our Paint By Number Kit tutorial!
00:00:05.500 --> 00:00:10.000
Let's start with your light blue paint, color number 5.
00:00:11.000 --> 00:00:15.000
Carefully fill in all the areas marked with a "5".In the WebVTT file:
- It starts with “WEBVTT” to designate the file type.
- Timecodes specify when each caption should be displayed and when it should disappear, using the format “hours:minutes:seconds.milliseconds”.
- The text after the timecodes is the caption displayed on the video, guiding viewers through the painting process step-by-step.
1.2.3 Audio Description or Media Alternative (Prerecorded)
This SC requires that important visual details of a video, such as actions, characters, scene changes, and on-screen text that aren’t described in the main audio, be narrated. Alternatively, you can provide a media alternative with all the information in a text document. However, there is an exception to this criteria if the prerecorded video content is an alternative to text already on the page and is clearly labeled as such.
Media Alternative Example
You’re creating a blog post about marine conservation with a special section dedicated to manatees. You include a video titled “Mysteries of the Manatees,” which showcases these creatures in their natural habitat, highlights their behaviors, and emphasizes the important conservation efforts in place to protect them.
Steps:
- Creating the Text Alternative
- Draft a detailed text that narrates the visual content, including descriptions of the manatees’ environment, their behaviors, any text or graphics displayed, and key conservation messages.
- Publishing the Text Alternative:
- Depending on the length and your preference, this could be a collapsible section directly on the page or a downloadable document.
<video controls>
<source src="mysteries-of-the-manatees.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<section>
<h2>Descriptive Transcript of "Mysteries of the Manatees"</h2>
<p>[00:00:00:15] The video begins with a serene underwater scene in Crystal River, Florida. A manatee calmly swims through clear, turquoise waters, occasionally grazing on surrounding seagrass patches.</p>
<!-- More detailed text description -->
</section>Level AA
1.2.4 Captions (Live)
This SC requires realtime captions for synchronized audio content, such as webcasts or live-streamed events.
Live Captions Example
A university decides to livestream a guest lecture series on “Internet of Things: Shaping Our Future.” This series explores how the Internet of Things technology revolutionizes industries, smart cities, healthcare, and our daily lives
Steps:
- The university selects a Communication Access Realtime Translation (CART) service to ensure technical terminology is accurately captioned.
- A CART captioner transcribes the live audio feed in real time, including dialogue and relevant sounds, providing immediate captions for the live stream.
- The university provides information on accessing live captions, ensuring attendees know and can easily use this feature.
1.2.5 Audio Description (Prerecorded)
SC 1.2.5 mandates audio descriptions for prerecorded videos to convey information about significant visual details not expressed by the primary audio alone, unlike SC 1.2.3, which provides a choice.
For instance, the W3C provides a helpful example of audio descriptions in a video about clear layout and design. Below the video, an “Enable Audio Description” button demonstrates how users can toggle audio descriptions on and off. This is an excellent demonstration of how audio descriptions can be seamlessly integrated into multimedia content to make it accessible to users who need them.
Prerecorded Audio Description Example
For the “Mysteries of the Manatees” video on your marine conservation blog, you’ve made the content more accessible by adding audio descriptions directly into the video’s audio track, in line with SC 1.2.5 requirements.
- You work with an audio description service to script and record descriptions of the visual content in your video. This includes details about the manatees’ behaviors, environment, and critical conservation messages.
- The audio descriptions are then mixed into the video’s original audio track, creating a seamless audio track that includes both the original content and the descriptions.
Conclusion
As we conclude our examination of Guideline 1.2: Time-based Media, we have explored the crucial components of ensuring that audio and video content are accessible to all. Through practical examples and discussions on SC 1.2.1 through SC 1.2.5, we’ve seen how integrating captions, audio descriptions, and media alternatives can dramatically enhance the user experience. Looking ahead, our journey through the WCAG guidelines continues. My next blog post will focus on Guideline 1.3: Adaptable. This guideline emphasizes creating content that can be presented differently without losing information or structure. So, stay tuned for the next post!