audio-video-captions

Description

The rule determines HTML media elements such as audio and video and check, if there are defined track="captions" elements there. It allows the inclusion of text tracks in WebVTT format, which can be used to provide additional information or translations for the media content.

Why HTML track element is important for accessibility?

The HTML track element plays a crucial role in enhancing accessibility, especially for individuals who rely on assistive technologies or have certain disabilities. Here are the key reasons why the track element is important for accessibility:

Provision of Alternative Text: The track element allows you to provide alternative text or descriptions for audio or video content. This is particularly useful for deaf or hard of hearing users, as well as for those who prefer to consume media without sound. For instance, caption timed text tracks can contain transcriptions or translations of the dialogue, sound effects, relevant musical cues, and other relevant audio information.
Support for Multiple Languages: With the track element, you can provide captions or subtitles in multiple languages. This makes content more accessible to users from various linguistic backgrounds.
Enhanced Search Engine Understanding: The track element can also help search engines understand the content of the video, improving SEO.
Different Types of Text Tracks: The track element supports different types of text tracks including captions, subtitles, descriptions, chapters, and metadata. This flexibility allows you to provide different types of alternative content based on the needs of your users.

How to fix it

Here is an example of how to use the track element in a video HTML element:

The track element in a video element example

<video controls>
 <source src="https://example.com/video.mp4" type="video/mp4">
 <track src="captions-cz.vtt" label="Czech captions" kind="captions" srclang="cz" default>
 <track src="captions-en.vtt" label="English captions" kind="captions" srclang="en">
 <p>This browser does not support the video element.</p>
</video>

In this example, two sets of Czech and English captions are provided for the video.

Standard

Accessibility, WCAG 2.1, Audio-only and Video-only (Prerecorded) (Level A)