The <video> Element
As defined in the HTML Living Standard, the <video> element is used to embed video content in a document. It provides a native interface for playback, removing the need for proprietary plugins.
(Note: Captions are essential for accessibility.)
<video controls width="640" height="360">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
Your browser does not support the video tag.
</video>Accessibility: Captions and Transcripts
Video content is multi-sensory. To be accessible, it must be perceivable by users who are deaf or hard of hearing, and users who are blind or have low vision.
WCAG Requirement: Captions (Prerecorded)
Success Criterion 1.2.2 (Level A): Captions are provided for all prerecorded audio content in synchronized media.
The <track> element is used to add timed text tracks (captions, subtitles, or descriptions) to the video. This is not optional; it is a core requirement for AA compliance.
Critical Usage Rules
- The
controlsAttribute: Always include thecontrolsattribute. Users must be able to pause, play, and adjust volume. Removing controls creates a significant accessibility barrier. - Autoplay Warning: Avoid
autoplay. It can be disorienting for screen reader users (as the audio may clash with the screen reader's voice) and is often blocked by browsers. - Muted Autoplay: If you must autoplay (e.g., for a background hero video), you must include the
mutedattribute.
A11y Tip: Audio Descriptions
For videos with important visual information that isn't conveyed in the audio, provide an Audio Description track or a descriptive text transcript.