如何将替代文本添加到实际上是无声、循环、自动播放 MP4 <video> 的 GIF?
How do I add alt text to a GIF that is actually a silent, looped, autoplay MP4 <video>?
我有一个few posts on my Wordpress website that have long GIF videos。为了减少这些 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>
我的问题是,添加替代文本的最佳方式是什么,就像我在 <img>
标签上添加一样?这些视频可能使用了 <video>
标签,但实际上它们更像是图片,应该可以有替代文字。什么最适合屏幕阅读器,什么最适合 SEO?
是否有其他方法可以实现我不知道的更小、更高效的 GIF 目标?
使用 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>
这里有几件事你需要考虑:-
1。视频是否为屏幕添加任何内容 reader 用户
如果不是(即下面的说明准确描述了视频内容),那么最好使用 aria-hidden="true"
从屏幕 reader 中隐藏它。不要为屏幕 reader 用户复制信息。由于您的 'captions' 实际上不是字幕,我认为您最好这样做。
2。让您的'captions'更通用
Can’t fit? Try lifting up the bike up and getting it closer. This parking meter was a little short for my bike (see how the handlebars touch the meter) so I couldn’t get it as close as an empty pole, but still plenty close.
以上例子参考了视频。而是将步骤描述为好像没有随附的视频一样。尝试将其更改为以下内容:-
Can’t fit? Try lifting up the bike up and getting it closer. The parking meter I tried to use was a little short for my bike and the handlebars touched the meter, so I couldn’t get it as close as an empty pole, but still plenty close.
以上句子没有以任何方式引用视频,本身就有意义。如果你的所有 'captions' 都像这样,那么在没有视频的情况下,说明应该仍然有意义。
3。你能暂停视频吗?
显然您不能暂停 GIF,但现在您正在使用视频,您应该允许人们选择暂停页面上的所有动画。要么允许通过单击暂停视频,要么在页面上切换以暂停所有动画。这些可能会让患有焦虑症等的人分心(尤其是当您在一个页面上同时播放数百个视频时。)
您的用例
鉴于您的用例,只需使用 aria-hidden="true"
隐藏视频元素并更新您的描述即可在以可访问的格式提供信息和不使屏幕 reader 用户过载之间取得很好的平衡没有任何价值的重复信息(如果在下面正确描述了每个视频,则没有必要为每个视频添加 title
并且使无声视频可访问的正确方法是添加场景的 enhanced audio descriptions
,这对您的用例来说太过分了。)。
不要忘记添加一种暂停视频的方法,一次一个,最好是在页面开头附近使用切换开关一次暂停所有视频。
我有一个few posts on my Wordpress website that have long GIF videos。为了减少这些 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>
我的问题是,添加替代文本的最佳方式是什么,就像我在 <img>
标签上添加一样?这些视频可能使用了 <video>
标签,但实际上它们更像是图片,应该可以有替代文字。什么最适合屏幕阅读器,什么最适合 SEO?
是否有其他方法可以实现我不知道的更小、更高效的 GIF 目标?
使用 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>
这里有几件事你需要考虑:-
1。视频是否为屏幕添加任何内容 reader 用户
如果不是(即下面的说明准确描述了视频内容),那么最好使用 aria-hidden="true"
从屏幕 reader 中隐藏它。不要为屏幕 reader 用户复制信息。由于您的 'captions' 实际上不是字幕,我认为您最好这样做。
2。让您的'captions'更通用
Can’t fit? Try lifting up the bike up and getting it closer. This parking meter was a little short for my bike (see how the handlebars touch the meter) so I couldn’t get it as close as an empty pole, but still plenty close.
以上例子参考了视频。而是将步骤描述为好像没有随附的视频一样。尝试将其更改为以下内容:-
Can’t fit? Try lifting up the bike up and getting it closer. The parking meter I tried to use was a little short for my bike and the handlebars touched the meter, so I couldn’t get it as close as an empty pole, but still plenty close.
以上句子没有以任何方式引用视频,本身就有意义。如果你的所有 'captions' 都像这样,那么在没有视频的情况下,说明应该仍然有意义。
3。你能暂停视频吗?
显然您不能暂停 GIF,但现在您正在使用视频,您应该允许人们选择暂停页面上的所有动画。要么允许通过单击暂停视频,要么在页面上切换以暂停所有动画。这些可能会让患有焦虑症等的人分心(尤其是当您在一个页面上同时播放数百个视频时。)
您的用例
鉴于您的用例,只需使用 aria-hidden="true"
隐藏视频元素并更新您的描述即可在以可访问的格式提供信息和不使屏幕 reader 用户过载之间取得很好的平衡没有任何价值的重复信息(如果在下面正确描述了每个视频,则没有必要为每个视频添加 title
并且使无声视频可访问的正确方法是添加场景的 enhanced audio descriptions
,这对您的用例来说太过分了。)。
不要忘记添加一种暂停视频的方法,一次一个,最好是在页面开头附近使用切换开关一次暂停所有视频。