Html 制作无声音可访问的视频元素

我目前正在制作一个带有无声视频横幅的网页

我使用的Chrome浏览器插件突出了页面内容中潜在的可访问性问题，它为视频元素带来了两个与可访问性相关的问题：

• 确保
  元素有标题
• 确保
  元素具有音频描述

---

我只是想知道，在沟通过程中，是否有任何建议表明视频元素没有可访问的音频。

video

可访问性有两个问题：用于替换声音的标题，以及用于描述图像的音频说明（或文本替代）

事实上，您的视频是无声的，并不意味着您不需要对视频中出现的内容进行文本描述

在您的例子中，我将查看属性

controls=“muted”

，它可以作为一个提示，指示视频当前没有任何声音的辅助技术

我将在以下选项中进行选择：

a） 我将在

video

元素上设置

aria descripeby

属性，以指向包含描述的

div

b） 或者，如果您的视频只是装饰性的，那么我会在父元素上设置

aria hidden=true

属性

---

是的，你可以使用html5音频/视频音量控制来检查视频是否有音频。希望这能有所帮助，正如我所理解的，重点不是检查视频是否有音频，这是一个事实：视频没有音频。我们的目标是以某种容易理解的方式表明这一事实，这是正确的@QuentinC。我可能会添加一个描述性的音频曲目，但实际上是在指导如何最好地说没有音频之后。如果视频是装饰性的，我会说aria hidden=true，而不是role=presentation。在屏幕阅读器的缓冲区中填充完全无趣的内容几乎没有什么意思。此外，role=presentation基本上表示“此元素没有角色”或“删除此元素通常应该具有的默认角色”。放在视频的父项上，可能是一个div或类似的没有语义意义的东西，它不会有任何效果。@QuentinC

aria hidden

属性应该对任何用户都看不见的信息（而不仅仅是AT用户看不见的信息）进行私有化。

presentation

角色的继承很难理解（），似乎只适用于所需的自有元素，而不包括

video

元素。出于这个原因，我改为支持

aria hidden

属性，但如果可能的话，我宁愿在

video

元素上设置

presentation

角色，比如

img

元素。对于屏幕阅读器用户来说，没有声音的装饰性视频是完全没有意思的，因此，最好不要无谓地污染阅读信息。我自己是屏幕阅读器用户，所以我可以告诉你；这与代码段的行号相同。再看看使用基于文本的图标所使用的技术，您将看到，在这种情况下，aria hidden应用于普通用户可以看到但屏幕阅读器应该隐藏的东西。对我来说，如果视频是有效的装饰性的，那么这里也一样。@QuentinC困难的方面是

aria hidden

将从任何辅助技术中删除元素。例如，眼睛跟踪设备可能需要激活播放/暂停按钮，即使媒体纯粹是装饰性的。但我完全同意，在当前使用ARIA时，

ARIA hidden

优于

presentation

角色。