This video element does not have a mechanism that allows an accessible name value to be calculated

I have the following code, which was rendered in AEM, but cannot understand what exactly needs to be corrected to resolve this accessibility report error:

"This video element does not have a mechanism that allows an accessible name value to be calculated. Ensure embedded objects are directly accessible [WEB-60]"

<video playsinline="" loop="" muted="" autoplay="" width="100%"/>
  <source src="video.mp4" type="video/mp4" data-src="video.mp4"/>
  <source src="video.mp4" type="video/webm" data-src="video.mp4"/>
  sorry, your browser doesn&#039;t support embedded videos.
</video/>

Could it be the empty attributes that are causing the issue (playsinline="" loop="" autoplay="")?

Solution

Typically, the video player itself does not have to be a focusable element, which means it doesn't really need an accessible name. All the controls within the video player (play, pause, mute, settings, etc) do need an accessible name.

But if keyboard focus can move to the video player, then just add an aria-label to the video.

<video aria-label="subject of the video" playsinline="" loop="" muted="" autoplay="" width="100%">
...
</video>

If you have text elsewhere on your page that has the title of the video, then you can use aria-labelledby instead.

<h2 id="newID">kittens and puppies</h2>
...
<video aria-labelledby="newID" playsinline="" loop="" muted="" autoplay="" width="100%">
...
</video>