How to remove "Alert" on HTML video element in WAVE Web Accessibility Evaluation Tool?

user_16642566 0
Viewed 185

I have put some HTML code I've written into WAVE, the online accessibility checker tool (https://wave.webaim.org). My code passes without any warnings apart from one "Alert" I keep getting on a video element.

The warning says:

A <video> or <audio> element is present.

And then gives a tip on what to do:

What To Do For video content with audio, ensure that synchronized captioning and a transcript is provided. For audio-only content, ensure that a transcript is provided.

I have checked my code and I don't think I am missing any attributes or doing anything that should make the alert appear and I have provided a transcript like it's suggested.

Here is my code:

<video controls="" width="250">
<source src="#" type="video/webm">
<source src="#" type="video/mp4">
<track kind="captions" srclang="en" src="./ask_my_dev_transcript.vtt" default>
<track kind="subtitles" srclang="en" src="./ask_my_dev_transcript.vtt">

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

Is there anything further I can be doing to ensure accessibility with regards to the alert or is this just something WAVE is alerting me of for visibility (i.e. the video transcript will need checking manually)?

html5-video accessibility html
2 Answers

I'd recommend adding a label attribute to your track elements, but otherwise, your code is valid and looks good to me.

I ran the WAVE chrome extension against an HTML page containing your example and an example (below) taken from MDN Web Docs:

<video id="video" controls preload="metadata">
   <source src="video/sintel-short.mp4" type="video/mp4">
   <source src="video/sintel-short.webm" type="video/webm">
    <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
    <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
    <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>

I received the same warning message that you got on both elements.

It appears that WAVE returns this warning for any <video> element and doesn't actually evaluate the code inside, which is probably why this is a warning and not an error.

A <video> or <audio> element is present. Note that WAVE does not analyze fall-back content within the or element. This content should be accessible because it will be presented to the user if the video or audio content is not supported.

user_42749330

This alert is simply informing you of the presence of the video element. It is not the intent to get rid of all alerts in WAVE, but to manually verify that they do not pose any accessibility barriers. If equivalent captions are present, then the alert can simply be disregarded.

user_93439650
Related