无障碍可访问性从首个标签起就要做对，关键在于规避致命错误：video不可用alt而应使用aria-label或figcaption，table需准确设置scope属性，label与input必须正确绑定，自定义控件须手动处理aria状态。
零基础也能立刻上手——无障碍可访问性不是“加功能”，而是从写第一个标签就开始做对的事。关键不是学多少新属性，而是避开几个致命错误：比如给 <video></video> 加 alt、用 <div> 模拟按钮却不加 <code>role="button"、表单 <label></label> 和 <input> 的 for/id 不一致。
为什么 <video></video> 不能用 alt 属性
alt 只属于 <img>，W3C 明确禁止在 <video></video> 或 <audio></audio> 上使用。屏幕阅读器会直接忽略它，甚至报错。
- 正确做法是用
aria-label或aria-labelledby描述视频用途，例如：<video aria-label="2026年产品发布会实录（含中文字幕）"></video> - 如果视频在
<figure></figure>里，优先用<figcaption></figcaption>，它天然被读出，比aria-label更轻量 - 绝对避免空值或泛化描述，如
aria-label="视频"—— 对视障用户毫无信息价值
<table> 的 <code>scope 属性到底要不要写
要写，而且必须写准。不写 scope，屏幕阅读器就无法判断一个 <th> 是列标题还是行标题，数据单元格会被读成“张三 HTML/CSS 22”，没有上下文。
<ul>
<li>
<code>scope="col" 用于第一行的列名，如 <th scope="col">姓名</th>
scope="row" 用于每行最左一列的行标识，如 <th scope="row">张三</th>
<thead> 和 <code><tbody>，<code>scope 必须出现在 <th> 上，不能只靠位置推断
<li>复杂多级表头时，仅靠 <code>scope 不够，需配合 id + headers 显式关联
<label></label> 和 <input> 绑定失效的三种真实原因
90% 的表单无障碍问题都卡在这一步：label 点不了、屏幕阅读器读不出输入项名称。根本原因几乎全是绑定断裂。
-
for值和id大小写/连字符/空格不一致，例如for="user_name"对应id="username" - JavaScript 动态生成 input 后没同步更新 label 的
for，或改了id却忘了修for - 用了
<label>姓名<input></label>这种包裹写法——部分旧浏览器和自动化测试工具不识别 - 检查方法：打开 Chrome DevTools → Accessibility 面板 → 点击 input，看 “Name” 字段是否显示 label 文本且指向正确
自定义播放控件必须手动处理的三个 ARIA 状态
一旦去掉 controls 属性，所有交互逻辑和状态反馈都要自己补全。漏掉任意一个，键盘用户或屏幕阅读器就完全失控。
- 每个按钮必须带
role="button"，否则键盘 Tab 不会聚焦它 - 播放/暂停按钮需动态切换
aria-pressed="true/false"，并配具体文案，如aria-label="暂停：当前进度 42 秒" - 进度变化、音量调整、静音切换等状态变更，必须输出到
aria-live="polite"区域，例如：<div aria-live="polite" aria-atomic="true">已静音</div>
真正难的不是记属性名，而是把「谁在什么时候需要什么信息」想清楚——比如屏幕阅读器用户听不到声音，所以字幕和文字稿不是补充，是刚需；键盘用户无法悬停，所以所有操作入口必须能 Tab 到、Enter 触发、视觉焦点清晰可见。这些细节不靠工具检测，得靠人去模拟体验。
