The <track> Element
As defined in the HTML Living Standard, the <track> element allows authors to specify explicit external timed text tracks for <audio> and <video> elements. It is a void element.
(Simulation of a caption track being rendered over a video.)
<video src="movie.mp4" controls>
<track kind="captions" src="subs_en.vtt" srclang="en" label="English" default>
</video>
View HTML Living Standard: The track element
The kind Attribute
The kind attribute defines the purpose of the text track. Choosing the correct value is essential for accessibility:
captions: Intended for users who are deaf or hard of hearing. Includes dialogue and important sound effects (e.g., "[Music playing]").subtitles: Translations of the dialogue for users who don't understand the language.descriptions: Textual descriptions of visual content, intended for users who are blind or low vision. This is the foundation of Audio Description.chapters: Used for navigation, allowing users to skip to specific sections of the media.metadata: Used by scripts; not visible to the user.
WCAG Requirement: Captions
Success Criterion 1.2.2 (Level A): Captions are provided for all prerecorded audio content in synchronized media.
Using <track kind="captions"> with a valid WebVTT (.vtt) file is the standard method for meeting this requirement. It ensures that the text remains synchronized with the audio and that users can toggle the captions on or off using native browser controls.
Technical Requirements
src: Address of the external text track file (must be WebVTT format).srclang: Language of the track (e.g.,en,es). Required ifkindissubtitles.label: A user-readable title for the track, which appears in the browser's menu (e.g., "English SDH").default: A boolean attribute that indicates the track should be enabled by default if the user's settings don't specify otherwise.
<!-- Multiple language support -->
<video controls>
<source src="video.webm" type="video/webm">
<track kind="subtitles" src="en.vtt" srclang="en" label="English">
<track kind="subtitles" src="fr.vtt" srclang="fr" label="Français">
</video>
Best Practices
- CORS Requirements: Text tracks are subject to Cross-Origin Resource Sharing (CORS). If your
.vttfile is on a different domain, you must include thecrossoriginattribute on the parent<video>or<audio>tag. - Labeling for Clarity: Use clear labels like "English (Captions)" vs "English (Subtitles)" to help users choose the correct track for their needs.
- Audio Description: For WCAG SC 1.2.5 (Level AA) compliance, use
kind="descriptions"to provide a text track that a screen reader can announce to describe the visual action in the video.
A11y Tip: User Styling
Native <track> elements allow users to customize the appearance of captions (font size, background color, opacity) through their operating system or browser settings. This is a significant accessibility advantage over "burned-in" or hard-coded captions.