元素必须嵌套在 内且 kind="descriptions" 才有效,用于为视障用户通过屏幕阅读器提供画面描述;需配合正确 WebVTT 格式(含时间戳与语义描述)、srclang="zh" 及辅助技术手动启用,iOS Safari 不支持。

track 元素必须配合 video 才能生效,单独写没用
很多人把 <track></track> 当成独立字幕组件,其实它只是 <video></video> 的附属轨道——没有包裹在 <video></video> 内部,浏览器直接忽略。正确结构是:<video><track kind="descriptions" src="desc.vtt" srclang="zh"></track></video>。注意:不是所有浏览器都默认显示描述轨道,kind="descriptions" 是辅助技术(如屏幕阅读器)识别的关键,不能写成 captions 或 subtitles。
descriptions 类型的 track 必须用 WebVTT 文件,且格式有硬性要求
视频描述不是普通字幕,它是为视障用户描述画面中不可听信息的文本流,WebVTT 文件开头必须包含 NOTE 或 STYLE 声明,且每段描述需带时间戳和明确的语义标记。常见错误:
- 直接复制字幕 .vtt 文件,没改
kind属性或内容结构 - VTT 文件里用
00:00:01.000 --> 00:00:03.000但没写实际描述,只留空行 - 用了中文但
srclang="zh"拼错成zh-CN(虽然部分浏览器容忍,但 WCAG 推荐用zh)
最小可用 VTT 示例:
WEBVTT 00:00:01.000 --> 00:00:04.000 镜头从左向右缓慢平移,展示办公室内三台并排的笔记本电脑,屏幕均亮着代码编辑器界面。
浏览器不会自动播放 descriptions,得靠辅助技术主动启用
<track kind="descriptions"></track> 不会像字幕那样在视频控件里显示开关按钮。它的作用是向屏幕阅读器(如 NVDA、VoiceOver)暴露可访问轨道。用户需要:
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记(深入)”;
- 在支持的浏览器中(Chrome + NVDA / Safari + VoiceOver),打开屏幕阅读器后播放视频
- 按快捷键(如 NVDA+Ctrl+D)手动切换到描述轨道
- 确保系统级辅助功能已开启,且视频未设置
autoplay(自动播放会跳过轨道初始化)
测试时别只看页面有没有字幕框弹出——要真用屏幕阅读器听,否则根本验证不了效果。
移动端兼容性差,iOS Safari 完全不支持 descriptions 轨道
iOS 系统级限制导致 kind="descriptions" 在 Safari 中被静默丢弃,即使 HTML 结构和 VTT 完全正确。Android Chrome 支持有限,仅部分版本响应。替代方案只有两个:
- 在视频旁提供同步更新的
<aside aria-live="polite"></aside>区域,用 JS 根据 currentTime 注入描述文本 - 放弃 track,改用 ARIA 标注 + 视频暂停控制,让用户手动触发描述播报
别在 iOS 上测 <track kind="descriptions"></track> 是否“生效”,它就是不工作——这不是你代码的问题,是平台能力缺失。


















