Skip to main content

Media

Accessible media ensures that all users, including those using assistive technologies, can understand, navigate, and operate your content. For media, always provide user controls and alternatives like captions or transcripts.

Examples​

Video​

✅ Correct

<figure>
  <video controls width="640" poster="thumbnail.jpg">
    <source src="example-video.mp4" type="video/mp4">
    <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default>
  </video>
  <figcaption>
    Example video with captions.
    <a href="example-video-transcript.html">Read full transcript</a>.
  </figcaption>
</figure>

❌ Incorrect

<video autoplay>
  <source src="example-video.mp4" type="video/mp4">
</video>

Audio​

✅ Correct

<figure>
  <audio controls>
    <source src="example-audio.mp3" type="audio/mpeg">
  </audio>
  <figcaption>
    Example audio.
    <a href="example-audio-transcript.html">Read transcript</a>.
  </figcaption>
</figure>

❌ Incorrect

<audio autoplay>
  <source src="example-audio.mp3" type="audio/mpeg">
</audio>

👍 Do's​

  • Always add a clear <caption> for context.
  • Maintain sufficient color contrast; don’t rely on color alone to convey meaning.
  • For video: provide controls and add captions (<track kind="captions">); provide a transcript.
  • For audio: provide controls and a transcript; avoid autoplay.
  • Provide additional context via <figcaption> and link to the transcript where needed.

👎 Don'ts​

  • Use autoplay with sound for audio/video.
  • Provide media without controls.
  • Publish media without captions or a transcript.

Extras​

  • Caption vs. Summary:
    • A caption describes the subject of the table and appears inside the table.
    • A summary/orientation can be provided as hidden text or via aria-describedby for complex tables.
  • Media tips:
    • Add a poster image for video (poster attribute) and provide multiple sources (<source>) for compatibility.
    • Avoid autoplay; respect user preferences and reduced motion.

Links/Sources/Plugins/Tools​