video 和 audio 标签不能用 alt 属性，应改用 aria-label 或 aria-labelledby；track 元素必须包含 srclang、label 且至少一条 default；自定义控件需手动实现键盘导航与 aria 状态；须提供带时间戳的文字稿并适配 prefers-reduced-motion。
video 和 audio 标签不能用 alt 属性
很多人下意识给 <video></video> 加 alt，这是无效的——浏览器会忽略它，屏幕阅读器也读不到。HTML 规范明确限定 alt 只属于 <img>。
正确做法是用 aria-label 或 aria-labelledby 提供功能说明：
<video aria-label="2026年产品发布会实录（含中文字幕）"></video>- 若视频在
<figure></figure>里，配合<figcaption></figcaption>更自然：<figcaption>现场演示：三步完成配置</figcaption>，屏幕阅读器会自动连读标题和图注 - 避免空泛描述，比如
aria-label="视频"—— 它没信息量，也不满足 WCAG 的“等效文本”要求
track 元素必须带 srclang 和 label，且至少一条 default
只写 <track kind="subtitles" src="captions.vtt"></track> 是不够的。缺少 srclang 和 label 会导致屏幕阅读器无法识别语言、无法在多轨菜单中显示可选字幕。
必须显式声明：
-
srclang指明字幕语言，如zh、en、ja，不能写zh-CN这类子标签（浏览器兼容性差） -
label是用户可见的菜单项名称，如label="中文（简体）"，需简洁明确 - 至少一条加
default，否则首次播放时字幕不出现，等于没提供 - 音轨（
kind="descriptions"）同理，视障用户依赖它理解画面信息
自定义控件必须手动实现键盘与状态反馈
一旦去掉 controls 属性，所有播放逻辑就得自己写，而可访问性短板往往出现在这里。
常见缺失点：
- 按钮没加
role="button"，键盘 Tab 无法聚焦 - 播放/暂停按钮缺少
aria-pressed="true/false"，屏幕阅读器读不出当前状态 - 进度条没设
role="slider"、aria-valuenow、aria-valuemin、aria-valuemax，无法拖动或播报位置 - 静音、音量变化没用
aria-live="polite"区域实时播报，用户不知道操作是否生效
示例关键片段：<button role="button" aria-pressed="false" aria-label="暂停：当前 42 秒"></button>
别忘了独立文字稿和 prefers-reduced-motion 适配
字幕不是万能的——听障用户可能需要全文记录，认知障碍用户可能更适应分段阅读。这不是锦上添花，而是法律强制项（如 EN 301 549、ADA）。
必须提供：
- 显眼链接，如
@#@#@#@#@#@#@#@#@#@0，放在<video></video>旁，不能藏在菜单或弹窗里 - 文字稿含时间戳（
[00:01:23]）、说话人标识、关键音效说明（如“[电话铃声]”、“[掌声持续5秒]”） - 用
@media (prefers-reduced-motion: reduce)关闭自动播放、轮播、进度条动画，否则可能引发眩晕症用户不适
最易被忽略的是：字幕文件本身要 UTF-8 编码、无 BOM，且第一行严格为 WEBVTT 后跟空行——否则 Safari 和部分旧版 Edge 直接拒绝加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
