我有几个工具提示可以在悬停时显示动画。起初我们使用 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>
查看这些示例了解如何创建可访问的工具提示。
关于html - 向无声 <video> 元素添加文本可访问性的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57812605/