html - 向无声 <video> 元素添加文本可访问性的正确方法是什么?

标签 html video accessibility

我有几个工具提示可以在悬停时显示动画。起初我们使用 Gif,但我们的团队决定用 .mp4 替换 gif。文件。这些动画展示了如何使用给定选项的示例。他们没有声音。

但是现在我无法找到为屏幕阅读器添加辅助功能的正确方法。显然你不能使用 alt视频元素上的文字。 title不是为了可访问性。我知道有一个 track您应该为标题添加的元素。但我们不希望这些视频动画上有可见的字幕。我们只需要替代文本来解释有一个动画显示了如何使用所选选项的示例。

最佳答案

目前还没有一种适当的方法可以在本地执行此操作。我找到了 this other post on SO关于控制 <track>使用 CSS。所以包括但隐藏它不会成功。

您可以创建动画的副本并将其包含在视频下方、隐藏或显示在 View 中。就像这个例子一样。 Audio transcript example .

您还可以做的是构建自己的 工具提示 .悬停视频时显示的一个使用 WAI-ARIA role="tooltip"aria-hidden属性以显示其工具提示以及它是否可见。在这些工具提示中,您可以放置​​任何关于视频的文字。只要确保 aria-hidden属性是 false悬停和 true 时当不是。

<span role="tooltip" aria-hidden="false">Your tooltip content</span>

查看这些示例了解如何创建可访问的工具提示。
  • Aria Tooltip Example
  • Tooltips simulated using ARIA
  • 关于html - 向无声 <video> 元素添加文本可访问性的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57812605/

    相关文章:

    Javascript 按钮样式不透明度未正确更改

    javascript - 如何在特定像素处停止图像?

    javascript - 如何使 CKEditor 删除线功能可用?

    ios - 从 accessibilityLabel 获取 UIVIew 用于 KIF 自动化

    html - Bootstrap 页面底部的按钮

    html - 悬停时更改背景 svg 的描边

    javascript - 如何从 PhoneGap 中的设备摄像头获取实时视频帧

    c++ - MediaFoundation,位图数组到 mp4

    javascript - 如何使用 jQuery 在视频中滑动并同时自动播放?

    javascript - 单击 ‘load more’ 按钮时键盘焦点应该放在哪里