CODEWITHSUNDEEP
htmlhtml5-video
Manngo
Manngo

Reputation: 16409

HTML5 video element — alternative text

Unlike the img element, the video element doesn’t include an alt attribute for missing or inaccessible content. It seems to me that video is more likely to cause loading or accessibility problems than the humble image.

The note in the W3C Document Doesn’t make make clear a simple alternative.

Is there a recommended procedure for providing a suitable alternative text, or, say a link to a transcript?

Upvotes: 16

Views: 19783

Answers (2)

Sam Watkins
Sam Watkins

Reputation: 8369

We can use ARIA attributes for accessibility on audio and video elements:

  • aria-label can serve in place of the alt attribute
  • aria-details can give the ID of an element holding the transcript, or the ID of a link to the transcript, or whatever other details you might have

Example:

<video controls src="/developers.mp4"
    aria-label="Steve Ballmer Going Crazy on Stage"
    aria-details="developers-transcript-link">
</video>

<a id="developers-transcript-link" href="/developers-transcript.html">Transcript</a>

Upvotes: 3

Marco Panichi
Marco Panichi

Reputation: 1185

As you pointed out, the tag <video> doesn't have an alt attribute.

I have two ideas to satisfy at least in part this need.

1) Adding a paragraph inside the <video> tag

<video>
  <source src="my-video-path.mp4" type="video/mp4">
  <p>Description of the video...</p>
</video>

2) Adding schema data

<video itemscope itemtype="http://schema.org/VideoObject">
    <source src="my-video-path.mp4" type="video/mp4">
    <meta itemprop="name" content="Name of the video">
    <meta itemprop="description" content="Description of the video...">
    <meta itemprop="duration" content="PT1M33S">
    <meta itemprop="thumbnail" content="my-video-thumbnail-path.jpg">
</video>

Upvotes: 2

Related Questions