Skip to main content

Video & Audio (<video>, <audio>, <track>, <source>)

When To Use

  • To embed video or audio content in documents. 1

General Rules

  • Its important to choose the right video and audio containers and codecs, including alternative formats, to increase browser support. For video content including MP4 and WebM should be enough. 3
    • The <source> element can be included in the <video> or <audio> elements to define multiple file sources in different formats.
    • An alternative to embedding video or audio content on your website is to embed them through <iframe> elements from video providers like YouTube. This can make including media easier. 3
  • The video or audio material should include both displayed subtitles which include dialog and important sound and music during playback (captions) and a written record of the entire recording‘s content (transcripts). For more details see below or WCAG 2.2 1.2.1 and 1.2.2. 1
    • This can be achieved by including a <track> element inside the <video> elements, which in turn has a .vtt file via the source attribute associated with it. This .vtt file includes the captions along with the timestamps of when they should be shown. 1
    • The <audio> element does not support WebVTT, but you can use the <video> element for audio files as well. 2
    • The <track> element should include the kind and srclang attributes to define what kind of track it is (e.g. caption, subtitle) and what language it is in. 4
  • Deocrative and sensory content:
    • If the video or audio content primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content. 6
    • If the video or audio content is purely decorational, the content can be programmed to be ignored by assistive technologies, instead of appling the content rules discussed below. 6
    • When deciding if a video or audio content is purly decorational or only a sensory experience, make sure not to use it as an excuse to just hide content instead of providing appropriate alternatives. For example users could benefit from accessible "Hero" videos that only have the purpose of visualzing a certain mood or vibe. This could be done by providing a comperative experience for non-sighted users using for example sounds or voices that convey the same mood. This way not only sighted users could benefit from the content. This is to say, to make sure to critially challenge the purpose of the content and if assistive technology users could also benefit from this content, before hiding it from them. 7

Rules By Content

This section list the rules that apply depending on the type of content. The rules are based on WCAG 2.2.

Audio only content

Video only content

Video content with sound

Live audio only

Live video with sound

Content Rule Descriptions

Following are the descriptions of the rules mentioned above.

Provide text alternatives:

  • Provide a text alternative. This is often a transcript including all the important information like dialogue, descriptions of important sounds, settings and setting changes and descriptions of expressions.

Provide alternative audio files:

  • Provide an audio track, describing all the all the important video content. The alternative should be linked right before or after the video and should be in a common audio format, such as MP3.

Provide captions:

  • Embed always visible captions (dialogs and important sounds) as text in the video.
  • Or provide closed captions (dialogs and important sounds), that can be turned on or of by the user.
  • Further information can be found in the source of this sentence. 5

Provide extended audio

  • Provide a second audio track or a seperate video, that includes an extended audio description of the important visual information. Extended audio descriptions temporarily pause the audio and video to allow critical information to be delivered when pauses in dialogue are insufficient for adequate descriptions.

Provide sign language

  • Sign language interpretation offers richer access to synchronized media by incorporating intonation, emotion, and additional audio cues absent in captions. The sign language can be embeded ether in the video itself or better yet as a second video that is sycronized with the main video.

Sources 

  1. MDN: <audio>: The Embed Audio element by Mozilla contributors is licensed under CC-BY-SA 2.5
  2. MDN: <video>: The Video Embed element by Mozilla contributors is licensed under CC-BY-SA 2.5
  3. MDN: Video and audio content by Mozilla contributors is licensed under CC-BY-SA 2.5
  4. MDN: <track>: The Embed Text Track element by Mozilla contributors is licensed under CC-BY-SA 2.5
  5. WebAIM: Captions, Transcripts, and Audio Descriptions © WebAIM
  6. W3C: Non-text Content (Level A) by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
  7. Stackoverflow: Making a video accessible when used as a background
Created at: 19.04.2023, Last updated at: 23.07.2023