Can we use an alt attribute with the video tag?

Frequently Asked Questions HTML FAQ
1

Question

The text content of video tags seems to behave in the same way as the alternative text for the img tag. For consistency, can we use an alt attribute with the video tag instead?

Answer

This is a great observation but we can not use the alt attribute within the opening video tag. While this may seem inconsistent, this is actually by design as we might want our video element to contain some fallback options. For example, if the video doesn’t load we might want to display a link to another video that does. As attributes can not contain markup, this scenario would not be possible with alt attributes alone.

If this fallback handling gives the developer more control, you might be wondering why the img tag doesn’t follow suit. The answer to this involves backwards-compatibility troubles.

40 Likes
2

"As attributes can not contain markup "… what does this statement means?

23 Likes
3

" backwards-compatibility troubles" can u elaborate it ? what kind of trouble is this exactly?

10 Likes
4

Attributes may not contain HTML mark up (tags), only printable characters.

The number one trouble would be a browser that does not support HTML5, which is when the VIDEO element was introduced. For a less generalized point of view, study the documentation and other articles relating to this element.

28 Likes
5

We do have an alternative to alt (alternate text) that works across all browsers, the title attribute is valid on the VIDEO element.

<video title="Bruce Lee meets Jackie Chan" ...>
65 Likes
6

but we can still give the external link under alt (alternate text) even though if it can’t contain markup.

1 Like
7

10m
We do have an alternative to alt (alternate text) that works across all browsers, the title attribute is validr on the VIDEO element.

since i just checked screen readers are not able to read the content using title attribute unlike alt

5 Likes
8

Screen readers can be set to verbose on title attributes, but usually default to alternate text only so the user isn’t inundated with chatter. title attributes are global, and apply to other elements such as links, language change, page fragments, etc. It’s for this reason they are not turned on by default.

14 Likes
9

the alt attribute contains only text, so how is it not possible to include that? it shouldnt contain “tags” you say. what can happen if i write, say, < video src= “xyz” controls alt =“video on so-and-so” > and close the element properly, and include the fallback url between them? please explain.

4 Likes
10

Go the the W3.org site and look up the VIDEO element. Find the part that describes permitted attributes. That is where you will find your explanation.

Part of the reasoning is that ALT text describes a static image, not a changing one. That is what closed captioning is for.

16 Likes
11

But consider a situation where a blind person has used a device that can’t play the video. How will he know there was a video and it isn’t supported?

12

Welcome to the forums, @beta6078252934,

The video element has a text node where we write the message,

Your device does not support video
5 Likes
13

still the concept is not clear. what does the alt tag represents that it can’t be used in a video tag? what if i write <video src =“xyz.mp4” controls alt=“The video is about a grizzly bear”.> why is that wrong?

4 Likes
14

Thanks for the suggetion.

6 Likes
15

I hate to bring this back up again, but could you give an example?

16

You can’t give an external link under alt here at codecademy and have it display automatically. I tried.

    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbeat.jpg" alt="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/>

I misspelled bear(beat) so it would use the alt. If this is giving the link then sure you gave it and it displayed in the browser. The person using this web-page would then need to copy/paste the link to another browser tab to see the image.

3 Likes
17

Makes sense! Thank you!

18

Interesting topic, reminds me of the issue of naming variables in programming at large. I used “Brown Bear in Forest”, but even just “Bear” might suffice if we take into consideration that the surrounding text mentions that we are talking about brown bears.

19

Hi, Roy. I am still not clear about this topic.

The following code is an example of the fallback. The content inside the opening and closing <video></video> tags is shown as a fallback in browsers. Not all browsers support the same video format, so we can provide multiple video sources in the element, and the browser will use the first source it supports.

<video controls width="250">

    <source src="/media/examples/flower.webm"
            type="video/webm">

    <source src="/media/examples/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

In terms of alt attribute, I don’t understand why you mentioned that attributes can not contain markup. Does this mean using the alt attribute to include a fallback video source? I assume the alt attribute does not need to include any HTML mark up (tags), and just include some descriptive words. So I think the fallback options have nothing to do with alt attribute. Could you please answer this question again without mentioning fallback? :smile:
I know the alt attribute is not the permitted attributes for Video element, but I really don’t understand the reason. :worried: :worried: :worried: If the alt attribute is valid for video element, I think this alt attribute can work for any source of the video. I tried the following code and my Chrome browser still plays the video normally.

<video controls width="250" alt="Flowers are in bloom">

    <source src="/media/examples/flower.webm"
            type="video/webm">

    <source src="/media/examples/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>
2 Likes
20

If you look at the specs for VIDEO, you will find that there is no alt attribute in its attribute list. We want the user agent to slip down to the fallback text, which is neither descriptive or alternate text.

Attributes won’t have any effect beyond what they are purposed for. That includes alt, so including it won’t show any signs of malfunction. Upload the HTML to a validator and it may advise that the alt is not expected.

2 Likes