该视频元素没有允许计算可访问名称值的机制。

huangapple go评论59阅读模式
英文:

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

问题

以下是翻译好的部分:

"这个视频元素没有允许计算可访问名称值的机制。确保嵌入对象可以直接访问 [WEB-60]"

"可能是空属性导致了这个问题(playsinline="" loop="" autoplay="")吗?"

英文:

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't support embedded videos.
</video/>

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

答案1

得分: 2

通常,视频播放器本身不需要成为一个可聚焦的元素,这意味着它实际上不需要一个可访问的名称。 视频播放器内部的所有控件(播放、暂停、静音、设置等)需要一个可访问的名称。

但如果键盘焦点可以移动到视频播放器,那么只需为视频添加一个aria-label

<video aria-label="视频主题" playsinline="" loop="" muted="" autoplay="" width="100%">
...
</video>

如果您的页面上有其他地方包含视频的标题,那么您可以使用aria-labelledby

<h2 id="newID">小猫和小狗</h2>
...
<video aria-labelledby="newID" playsinline="" loop="" muted="" autoplay="" width="100%">
...
</video>
英文:

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.

&lt;video aria-label=&quot;subject of the video&quot; playsinline=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; autoplay=&quot;&quot; width=&quot;100%&quot;&gt;
...
&lt;/video&gt;

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

&lt;h2 id=&quot;newID&quot;&gt;kittens and puppies&lt;/h2&gt;
...
&lt;video aria-labelledby=&quot;newID&quot; playsinline=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; autoplay=&quot;&quot; width=&quot;100%&quot;&gt;
...
&lt;/video&gt;

huangapple
  • 本文由 发表于 2023年3月21日 03:11:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75794374-2.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定