kind="descriptions" 不用于音频描述,而是提供同步文字旁白;真正音频描述需用 kind="metadata" 配合 js 控制播放。

track kind="descriptions" 的实际作用不是给视障人士听的
直接说结论:kind="descriptions" 在规范中**不用于音频描述(audio description)**,而是为视频提供**同步的文字性旁白说明**,比如解说画面中未用语音表达的视觉信息(“镜头缓缓推进,一张泛黄的老照片出现在桌面”)。它默认渲染为字幕样式,浏览器不会自动转成语音;屏幕阅读器通常也不会主动朗读它——除非用户手动聚焦到该轨道对应的 <div> 或启用了特定辅助功能模式。
<h3>真正给视障人士提供音频描述要用 kind="metadata" + JS 驱动</h3>
<p>W3C 明确将音频描述归类为元数据轨道,需配合脚本控制播放逻辑。关键点:</p>
<ul>
<li>
<code>kind="metadata" 是唯一被广泛支持用于音频描述的取值,且必须搭配 srclang 和 label
timeupdate 事件,检测当前时间点是否匹配描述触发区间<audio></audio> 元素或 Web Audio API 加载独立的 AD 音频文件(不能直接“播放 track”)<video controls><source src="movie.mp4"><track kind="metadata" src="ad.vtt" srclang="zh" label="音频描述"></track></source></video>其中
ad.vtt 内容需是带时间戳的文本描述,再由 JS 解析并触发对应音频VTT 文件里写 descriptions 时容易忽略的兼容细节
即使用了 kind="metadata",VTT 文件格式不对也会让 JS 解析失败:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 必须以
WEBVTT开头,且首行后要空一行 - 时间戳格式严格为
HH:MM:SS.mmm --> HH:MM:SS.mmm,毫秒必须三位(如00:01:23.450),少一位或用逗号会解析失败 - 每段描述前要加唯一 ID 行(如
1),否则部分旧版浏览器的track.track.cues可能为空 - 避免在描述文本中使用 HTML 标签——VTT 不支持渲染,但某些屏幕阅读器可能误读转义字符
无障碍落地的关键不在标签,而在播放器逻辑
很多开发者以为加了 <track kind="descriptions"></track> 就算完成音频描述支持,其实完全相反:
- 原生
<video></video>控件根本不识别kind="descriptions",也不提供切换开关 - 必须自己实现 UI 控件(如按钮),并绑定
track.mode = "showing"——但这只影响字幕显示,和音频无关 - 真正的音频描述需要监听视频播放位置、预加载 AD 音频片段、处理暂停/快进时的中断逻辑,甚至要考虑多语言 AD 轨道的并发管理
- 最常被跳过的一步:在
<video></video>上设置aria-describedby指向动态生成的描述容器,让屏幕阅读器知道当前有可读描述
音频描述不是加个 track 就能生效的功能,它是嵌入在播放器行为里的实时语音合成或音频注入过程。没 JS 控制,kind 值设成什么都只是静态文本。










