我已经把我写的一些HTML代码放入WAVE,在线可访问性检查工具(https://wave.webaim.org)。我的代码通过时没有任何警告,除了一个"Alert"我一直在视频元素。
提示:
存在
<video>
或<audio>
元素。
然后给出了一个建议:
如何处理对于带有音频的视频内容,确保同步提供文字说明和文字记录。对于纯音频内容,确保提供成绩单。
我已经检查了我的代码,我不认为我错过了任何属性或做任何应该使警报出现的事情,我已经提供了一个像建议的成绩单。
下面是我的代码:<video controls="" width="250">
<source src="#" type="video/webm">
<source src="#" type="video/mp4">
<track kind="captions" srclang="en" src="./ask_my_dev_transcript.vtt" default>
<track kind="subtitles" srclang="en" src="./ask_my_dev_transcript.vtt">
Sorry, your browser doesn't support embedded videos.
</video>
我还可以做些什么来确保警报的可访问性,或者这只是WAVE提醒我可见性的东西(即视频记录需要手动检查)?
此警告只是通知您视频元素的存在。这并不是要消除WAVE中的所有警报,而是要手动验证它们不会造成任何可访问性障碍。如果存在等价的标题,则可以简单地忽略该警告。
我建议在您的track
元素中添加label
属性,但除此之外,您的代码是有效的,对我来说看起来很好。
我在一个HTML页面上运行了WAVE chrome扩展,其中包含您的示例和一个示例(下面),取自MDN Web Docs:
<video id="video" controls preload="metadata">
<source src="video/sintel-short.mp4" type="video/mp4">
<source src="video/sintel-short.webm" type="video/webm">
<track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
<track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
<track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>
我收到了你在两个元素上得到的相同的警告信息。
似乎WAVE对任何<video>
元素返回此警告,并且实际上不计算其中的代码,这可能就是为什么这是一个警告而不是错误。
存在
<video>
或<audio>
元素。注意,WAVE不分析或元素中的回退内容。这些内容应该是可访问的,因为如果视频或音频内容不被支持,这些内容将呈现给用户。