只能用鼠标、焦点看不见、按钮只剩图标、错误只变色、视频没有字幕、自动播放不能停、触控目标太小。
产品与设计 · 视觉基础
无障碍Accessibility
让同一个任务拥有等价入口：原生语义、键盘与焦点、字幕和转写、对比与触控、文字状态及减弱动效一起验，而不是事后补一个 ARIA。
同一课程播放器：修复后再复测
这是课程播放页：讲者画面、播放键、时间轴、字幕和转写共同帮助用户学习。先尝试旧版，再把语义、焦点和多通道信息直接修回同一个播放器。
短任务 · 同一段课程视频先尝试播放，修复障碍，再用键盘与读屏复测。
旧版播放器 · 待尝试CODENOW CLASS · DESIGN SYSTEMS第 4 课 · 原生语义与 ARIA
Ⅱ 已暂停字幕轨 缺失 · 听障用户无法获取讲解
障碍发生在播放器上旧版读屏输出：按钮（未命名）→ 按钮（未命名）；听不出哪个是播放、哪个是字幕。
× Tab 已到播放键 · 但焦点不可见× 没有字幕文件，也没有文字转写；听不见音频时，这一课的内容在这里中断。
准备：旧版播放器看得见播放图标，但图标没有对外名称、Tab 焦点不可见、字幕轨为空。先尝试播放。
刚才播放器教会的六件事
无障碍不是一个开关。它把同一个任务拆成多条等价入口，并让每条入口都有可感知结果。
- 原生语义先行
- 能用 button、a、label、video 就先用；ARIA 用来补名称、状态与关系，不重复或改写原生语义。
- 键盘路径 = 视觉路径
- Tab 顺序跟着界面阅读顺序走，焦点环必须清楚；不要用正 tabindex 硬拼另一套路线。
- 媒体要有等价内容
- 同步字幕承接对白与关键声音，完整转写帮助搜索与回看；它们不能被一张「CC」图标代替。
- 状态不只靠颜色或动效
- 播放、失败与完成同时给文字、符号和 live status；用户暂停播放后，自动动效也应停止。
- 对比与触控同样是入口
- 文字和控件对比要达标，触控目标留出可点范围；「看得到」和「点得到」必须一起验。
- 自动检查只抓一部分
- 扫描能发现部分名称和对比问题，真实键盘顺序、读屏播报、字幕质量与任务完成仍要手测。
什么时候把无障碍放进验收
新主流程、媒体、表单、弹层、拖拽、图标按钮和动效上线前都要验；不要等收到障碍反馈才补。
无障碍先保证「能完成」；信息架构、性能与易用性还要另验。自动扫描也不能替代键盘、读屏和真实任务测试。
从内容到复测的最短路径
先保证内容有等价表达，再让控件和状态可操作、可感知，最后保持同一任务条件复测。
- 列出核心任务和内容：这里是「播放一段课并理解讲解」，所以播放、字幕、转写都不能缺。
- 先选原生元素：播放和字幕用 button；可见文字就是名称，不足时再补 aria-label。
- 沿 DOM 顺序只用键盘：Tab 到播放与字幕，Enter / Space 激活；焦点不被遮住，顺序与画面一致。
- 逐通道检查：字幕、转写、对比、触控、错误与 live status 都在原物件附近，不能只藏在页脚说明。
- 保持同一内容复测：仍播放第 4 课，从 00:00 开始，用键盘与一种读屏再走一遍，并测试减弱动效。
同一播放器的一处关键差异
两边内容与目标相同，只改变用户是否拥有可操作、可感知的等价路径。
原生 button 保留键盘行为，明青焦点环清楚；状态同时写「播放中」，用户可暂停，减弱动效偏好会被尊重。
结果：鼠标、键盘、读屏与听障用户都能完成同一个播放任务。同一视频把 div 画成播放键，自动动效不能停；读屏只听见「按钮」，键盘到了也看不见。
后果：内容虽然存在，部分用户的任务却在播放器入口中断。快速自测
课程播放器有一个可点击的三角图标，但读屏只念「按钮」、Tab 到达后看不见焦点，也没有字幕。最先该怎样修？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。