可访问性需持续维护而非一劳永逸：video必须明确关联描述、自定义控件需正确声明role与状态、track需设default、preload需配合faststart，每次DOM变更都须校验语义链。
可访问性不会因为代码没报错就自动保持——它会在你改结构、换控件、删注释时悄悄退化。必须把 a11y 当成和功能、样式同等重要的运行时约束来维护。
video 元素删掉 aria-label 后屏幕阅读器直接失语
很多人重构时顺手删掉 aria-label，觉得“视频在 figure 里有 figcaption 就够了”。但实际中，<figure><video></video><figcaption>发布会实录</figcaption></figure> 的语义链并不自动成立：部分屏幕阅读器（如 NVDA + Firefox）需明确用 aria-labelledby 指向 figcaption ID 才能关联；若 figcaption 被移走或改成 div，整个描述就断了。
- 每次修改
<video>父容器或相邻标签，必须同步检查aria-labelledby是否仍指向有效 ID - 避免用
aria-label写泛化描述（如“视频”），而应写具体用途（如“2026 新品发布会完整回放，含中英双语字幕”） - 若
<video>是独立存在（非<figure>嵌套），必须保留aria-label或aria-labelledby，不能靠上下文猜测
自定义播放控件漏掉 aria-pressed 和 role="button"
用 <button> 替代原生 controls 时，常见错误是只加 click 事件，却忘了声明交互状态。结果键盘用户 Tab 进去按空格，按钮没反馈，也无法得知当前是“播放中”还是“已暂停”。
- 每个控制按钮（播放/暂停/静音）必须带
role="button"，否则屏幕阅读器当普通文本读 - 播放状态要用
aria-pressed="true/false"动态更新，不能只靠 CSS class 控制视觉 - 进度条需同时支持键盘方向键（←→）和
aria-valuenow/aria-valuemin/aria-valuemax，否则视障用户无法拖动
track 字幕轨删 default 属性后用户看不到首帧字幕
<track kind="subtitles" srclang="zh" label="中文" src="cap-zh.vtt"> 没加 default，等于默认关闭。用户第一次打开视频，字幕不出现，且多数人根本不知道要手动点“字幕”按钮——这不是体验问题，是可访问性失效。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 每组字幕必须有且仅有一条带
default，多条 default 会导致行为未定义 - 删
<track>标签前，先确认对应语言文字稿是否已通过其他方式（如旁侧链接）提供 - 如果用 JS 动态加载字幕，必须在插入
<track>后手动调用video.textTracks[0].mode = 'showing'，否则即使 DOM 存在也不生效
preload="metadata" 导致 duration 为 NaN，进而让 aria-live 进度播报失效
当服务端 MP4 没加 faststart，preload="metadata" 会卡住，video.duration 返回 NaN。此时依赖它的 aria-live 区域（如“当前 0 秒，总长 NaN 秒”）不仅无效，还会干扰屏幕阅读器节奏。
- 上线前必须用
ffprobe -v quiet -show_entries format=duration -of csv=p=0 your.mp4验证 duration 可读 - 服务端转码必须加
-movflags +faststart，否则preload="metadata"在弱网下比preload="none"更伤 a11y - 进度播报逻辑应 fallback 到
video.currentTime和video.buffered.end(0)，而非强依赖duration
最易被忽略的点：可访问性不是一次配置，而是随每次 DOM 变更持续校验的状态。改一个 class、挪一个标签、删一行注释，都可能切断某条语义链——它不会报错，只会让某个用户彻底听不见、看不见、点不动。
