Understanding Accessible Audio & Video
Accessible multimedia provides alternatives for visitors who cannot hear the audio, see the video, or interact with media controls in the usual way.
HTML provides native audio and video elements, but accessible media requires more than placing a media file on a webpage. Captions, transcripts, audio descriptions, usable controls, and careful playback behavior help make the same information available to people with different accessibility needs.
Why Media Accessibility Matters
Audio and video can communicate information that is unavailable to someone who cannot hear or see part of the presentation. Providing equivalent alternatives allows visitors to receive important content through another method.
Captions can make spoken dialogue and important sounds available as text. Transcripts provide a text version of audio information, while audio descriptions can explain important visual information that is not communicated through the soundtrack.
Accessible media also requires controls that can be operated without relying on a mouse and playback behavior that does not unexpectedly interfere with other content or assistive technology.
Video Captions
Captions provide a synchronized text alternative for spoken dialogue and other meaningful audio in a video. They are especially important for visitors who are deaf or hard of hearing.
Good captions include more than the words being spoken. When necessary for understanding the content, they can identify speakers and communicate meaningful sounds such as music, alarms, applause, or other audio cues.
Captions should be synchronized with the video so the text appears at the appropriate time and remains readable long enough to be understood.
The <track> Element
The <track> element can associate timed text with an HTML <video> or <audio> element. Caption files commonly use the WebVTT format with the .vtt file extension.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="captions.vtt"
kind="captions"
srclang="en"
label="English"
default>
</video>The kind="captions" value identifies the track as captions, srclang="en" identifies the language, and label="English" provides a readable name for the track.
The default attribute indicates that the track should be enabled by default when user preferences do not select another track.
Audio and Video Transcripts
A transcript provides the meaningful audio information from media as text. For audio-only content, a transcript can provide an alternative for visitors who cannot hear the recording.
A useful transcript includes the spoken content along with important non-speech information needed to understand the presentation. Speaker identification can also be included when more than one person is speaking.
Transcripts can benefit more than accessibility. Visitors can search the text, review information without replaying the media, read in environments where audio is inconvenient, and use translation or other text-based tools.
<video controls>
<source src="garden-tips.mp4" type="video/mp4">
<track src="garden-tips-captions.vtt"
kind="captions"
srclang="en"
label="English"
default>
</video>
<p><a href="garden-tips-transcript.html">Read the video transcript</a></p>Audio Descriptions
Audio descriptions communicate important visual information that is not already explained by the video's regular audio. They can describe meaningful actions, settings, expressions, demonstrations, text displayed on screen, and other visual details needed to understand the content.
Descriptions are typically placed during natural pauses in dialogue when possible. They may be included in an alternate audio-described version of the video or provided through a media player that supports selectable description tracks.
Not every video requires additional description. If all meaningful visual information is already communicated clearly through the existing audio, a separate description may not add anything necessary.
Accessible Media Controls
Visitors need to be able to start, stop, pause, and otherwise operate media using the keyboard. The native controls attribute provides browser-supplied controls for HTML audio and video.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>Native media controls generally provide a stronger accessibility foundation than building an entirely custom player. Browser and assistive technology support can vary, however, so important media should still be tested.
If custom media controls are created, each control needs appropriate semantics, an accessible name, keyboard operation, visible focus, and understandable states.
Avoid Unnecessary Autoplay
Media that begins playing automatically can be distracting and may interfere with visitors who are listening to a screen reader. Unexpected audio can make it particularly difficult to hear speech produced by assistive technology.
Allowing visitors to start media themselves is usually the more predictable approach.
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>If audio does start automatically and continues for more than a brief period, users need an accessible way to pause or stop it or control its volume independently of the overall system volume.
Flashing and Moving Content
Rapidly flashing visual content can create a serious accessibility problem for people with photosensitive seizure disorders. Avoid content that flashes rapidly, particularly large or high-contrast flashing areas.
Moving or automatically updating content can also make a page difficult to use for people who need additional time to read or interact with information. When movement is not essential, provide appropriate controls that allow visitors to pause, stop, or hide it.
Accessibility testing should consider the behavior of the media itself, not only the HTML used to embed it.
Fallback Content
HTML audio and video elements can contain fallback content for situations where the browser cannot play the embedded media.
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>Fallback text can explain that the media is unavailable or provide another way to access the information. It should not be confused with captions, transcripts, or audio descriptions, which address different accessibility needs.
Testing Media Accessibility
Accessible media should be tested by considering how visitors can receive its information and operate its controls in different ways. Watch a video without sound and determine whether captions provide the necessary spoken and non-speech information.
Listen to the video without watching the screen and determine whether important visual information is missing from the audio. Review transcripts for completeness and make sure caption timing matches the presentation.
Finally, operate the media using only the keyboard. Controls should be reachable in a logical order, focus should remain visible, and essential functions should not require a mouse.
Accessible Media Example
The following example uses the native HTML video controls and adds an English caption track using a WebVTT file.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="captions.vtt"
kind="captions"
srclang="en"
label="English"
default>
Your browser does not support HTML video.
</video>Use the media controls to play and pause the video, enable or disable captions when the browser provides that option, and use the keyboard to move through the available controls.
Best Practices
- Provide synchronized captions for prerecorded video containing meaningful audio.
- Include meaningful non-speech sounds in captions when they are necessary to understand the content.
- Provide an appropriate text alternative for audio-only content, such as a transcript.
- Provide audio descriptions when important visual information is not communicated through the existing audio.
- Use native HTML media controls when they provide the functionality the presentation requires.
- Make custom media controls keyboard accessible and provide clear accessible names and focus indicators.
- Avoid unnecessary autoplay, especially autoplay with sound.
- Avoid unsafe flashing content and provide controls for nonessential moving or updating content when required.
- Do not treat fallback text as a replacement for captions, transcripts, or audio descriptions.
- Test captions, alternatives, and media controls rather than assuming the media is accessible because the HTML is valid.
Summary
Accessible audio and video provide multiple ways for visitors to receive multimedia information. Captions communicate meaningful audio as synchronized text, transcripts provide a text alternative, and audio descriptions can communicate important visual information.
Accessible media also requires usable controls and predictable playback. Native HTML controls provide a useful starting point, while careful testing helps ensure that captions, descriptions, keyboard interaction, and other alternatives work as intended.