网页视频无障碍字幕核心是确保听障者、非母语者等用户真正可用，需规范使用track标签、webvtt文件（顶格webvtt、utf-8无bom、正确时间戳）及html属性（kind、src、srclang、label），并配置服务器mime类型与cors。
网页视频加无障碍字幕，核心不是“让字幕显示出来”，而是让不同需求的用户——比如听障者、非母语者、弱光环境下的观看者——能真正用得上、找得到、切得动。这需要 track 标签配合规范文件、正确属性和语义意图，缺一不可。
选对 kind 属性，明确字幕用途
kind 决定了字幕在播放器中如何归类、是否出现在字幕菜单、甚至是否被辅助技术识别：
- subtitles：面向外语或理解困难用户的翻译性字幕（含对话+关键音效），适合大多数多语言场景
- captions：专为听障设计，必须包含说话人、语气、音乐、环境声等完整音频信息；浏览器通常将其与 subtitles 分开显示，屏幕阅读器也优先读取这类轨道
- descriptions：纯音频描述，供视障用户了解画面内容，不显示在画面上，但会被读屏软件朗读
- 别写成 kind="subtitle" 或 kind="caption"——少字母就失效；也别混用，比如把描述性文字塞进 subtitles 轨道
WebVTT 文件必须严格合规，尤其对无障碍敏感
无障碍场景下，浏览器和辅助工具对格式错误更零容忍。一个空格、一个BOM、毫秒位数错，都可能导致整段字幕跳过或静默失败：
- 首行必须是顶格、全大写、无空格、无 BOM 的 WEBVTT，后面紧跟一个空行
- 时间戳格式为 00:00:01.234 --> 00:00:04.567：小时/分钟/秒两位，毫秒三位，箭头前后各两个空格
- 文件编码必须是 UTF-8 无签名（无 BOM），否则中文、日文、阿拉伯文可能变方块或空白
- 避免在 .vtt 中写 HTML 标签（如 ），它们不会被渲染，只会原样输出；样式统一用 CSS 的
::cue控制
HTML 结构和属性一个都不能省
track 必须作为 video 的直接子元素，且严格位于所有 source 之后、video 闭合前。四个关键属性要显式写出：
- kind：如上所述，按实际用途选值
- src：指向可访问的 .vtt 文件路径（不能是 blob URL；本地开发需起服务，避免 file:// 协议）
-
srclang：使用标准 BCP 47 码，如
zh-Hans、en-US、ja；写chinese或english无效 - label：用户在右键菜单或控件栏看到的名称，建议清晰可辨，例如 “English (Captions)”、“中文(简体, 听障适用)”
- 若希望默认启用，加上
default；但同一 kind 下只能有一个 default，且 captions/subtitles 才推荐设
补充：让无障碍支持真正落地
仅靠 HTML 不足以覆盖所有场景：
- 服务器需返回正确的 MIME 类型：
Content-Type: text/vtt，Nginx/Apache 要显式配置 - 跨域加载时，服务端必须响应
Access-Control-Allow-Origin: *，否则 Safari 和 Firefox 会拒绝解析 - 可通过 JavaScript 动态控制
track.mode（如"showing"/"disabled"），实现语言切换或无障碍偏好同步 - 测试时，开启系统级读屏软件（如 VoiceOver、NVDA），确认 descriptions 轨道被朗读、captions 轨道被识别为可切换字幕项
