1

我在我的 Wordpress 网站上有一些帖子，其中包含很长的 GIF 视频。为了减少这些 GIF 的巨大尺寸，我将它们转换为 MP4 视频，现在使用<video>标签来显示它们，如下所示：

<div>
<video src="myVideo.mp4" autoplay="autoplay" loop="loop" muted="" playsinline="" webkit-playsinline="" width="600">
</video>
<p class="wp-caption-text">My caption that makes it look more like an img than a video</p>
</div>

我的问题是，添加 alt 文本的最佳方法是什么，就像我在<img>标签上添加的那样？这些视频可能使用了<video>标签，但实际上它们更像是图像，并且应该能够具有替代文本。什么最适合屏幕阅读器，什么最适合 SEO？

还有其他方法可以实现我不知道的更小、更高效的 GIF 的目标吗？

4

2 回答 2

1

使用 title 属性，这在 VIDEO 元素上有效。正如 ALT 文本描述的静态图像！

<video title="xyz" ...>

像：

<div>
<video title="xyz " src="myVideo.mp4" autoplay="autoplay" loop="loop" muted="" playsinline="" webkit-playsinline="" width="600">
</video>
<p class="wp-caption-text">My caption that makes it look more like an img than a video</p>
</div>
于 2019-12-09T13:13:22.613 回答
1

这里有几件事情你需要考虑：-

1. 视频是否为屏幕阅读器用户添加了任何内容

如果不是（即下面的说明准确地描述了视频内容），那么最好的做法是使用aria-hidden="true". 不要为屏幕阅读器用户复制信息。由于您的“字幕”实际上不是字幕，我认为您最好这样做。

2.让你的“字幕”更通用

装不下？尝试将自行车举起并靠近它。这个停车计时器对我的自行车来说有点短（看看车把如何接触计时器），所以我不能把它弄得像空杆一样近，但仍然很近。

上面的例子引用了视频。而是将步骤描述为好像没有随附的视频一样。尝试将其更改为以下内容：-

装不下？尝试将自行车举起并靠近它。我尝试使用的停车计时器对我的自行车来说有点短，并且车把碰到了计时器，所以我无法像空杆那样靠近它，但仍然很接近。

上面这句话没有以任何方式引用视频，并且本身就有意义。如果你像这样制作所有的“字幕”，那么没有视频的说明应该仍然有意义。

3. 可以暂停视频吗？

显然你不能暂停 GIF，但现在你正在使用视频，你应该允许人们选择暂停页面上的所有动画。要么允许通过单击暂停视频，要么在页面上切换以暂停所有动画。这些可能会分散患有焦虑症等的人的注意力（尤其是当您在一个页面上同时播放数百个视频时。）

您的用例

鉴于您的用例，简单地使用和更新您的描述隐藏视频元素将在以可访问的格式提供信息和不使屏幕阅读器用户过载的重复信息不增加任何价值之间取得很好的平衡（添加一个foraria-hidden="true"没有意义title如果在下面正确描述了每个视频，并且使无声视频可访问的正确方法是添加enhanced audio descriptions场景，这对于您的用例来说太过分了。）。

不要忘记添加一种方法来暂停所讨论的视频，一次一个，或者最好使用页面开头附近的拨动开关一次全部暂停。

于 2019-12-09T18:20:14.250 回答