javascript - 如何将屏幕阅读器可访问的文本与 video.js 元素相关联，例如播放按钮

Question

问题的背景是通过Section 508包含多个嵌入视频的 html 页面的可访问性测试，在这种情况下为 4。失败被描述为：

“播放按钮没有屏幕阅读器识别即将播放的视频标题。”

video.js播放器的具体实现是Brightcove播放器。目标是让屏幕阅读器在按钮被激活之前，在点击播放按钮时阅读视频的标题。

将aria-label=一行添加到包含div在嵌入代码中的视频代码允许屏幕阅读器访问。但是用户仍然必须再次跳格到实际的播放器控件，因为跳格尚未进入video.js代码的默认选项卡顺序的控件元素。此外，这样做似乎会干扰逻辑标签排序。该订单div首先通过所有容器，然后返回到Play button第一个视频的第一个。我无法纠正它"tabindex=" numbers——它们似乎被忽略了。

标签： javascriptaccessibilityvideo.js

Answer 1

使用“高级”嵌入代码时的跳位顺序问题通过一个看似简单的解决方案来解决：

  tabindex="0"

添加到包含每组 video.js 代码的div容器中完成了这项工作。进一步澄清：这是指 Brightcove 的“高级”代码，其形式开头为

<video-js data-account= ...

而他们的“标准”代码使用 iframe。