for+id是唯一可靠方案，因旧版NVDA/JAWS依赖显式绑定才能稳定播报状态和联动焦点；嵌套仅为启发式推测，不满足WCAG 2.1 A级强制要求，且多个控件共用id、大小写不一致或动态渲染不同步均会导致关联失效。
label 必须用 for 属性绑定 id，不能只靠嵌套，否则旧版 NVDA/JAWS 无法稳定播报状态或联动焦点。
为什么 for + id 是唯一可靠方案
嵌套写法（比如 <label><input type="checkbox">同意</label>）在部分屏幕阅读器中会跳过状态变更播报——例如勾选后不读“已勾选”，只报“复选框”。这不是 bug，而是 WCAG 2.1 A 级强制要求显式绑定。显式关联让辅助技术能 100% 确定“这段文字描述的就是这个控件”，而嵌套只是启发式推测，旧引擎不认。
常见错误现象：
-
for值拼错或大小写不一致（for="Email"对应id="email"→ 不匹配） - 多个控件共用同一个
id→ 屏幕阅读器随机绑定其中一个 - 动态渲染时 JS 生成了
id却忘了同步更新for值
aria-label 和 aria-labelledby 的使用边界
aria-label 只适用于**没有视觉标签**的控件，比如纯图标按钮 <button aria-label="关闭"></button>；已有 <label for="xxx"> 的输入框再加 aria-label，Lighthouse 会直接报错冗余。
立即学习“前端免费学习笔记（深入）”；
aria-labelledby 适合需要拼接多个文本节点的场景，比如一个输入框要同时读出标题、单位和提示：“搜索价格（元）”，可写成：
<span id="price-label">搜索价格</span> <span id="price-unit">（元）</span> <input aria-labelledby="price-label price-unit" />
注意：
-
aria-labelledby指向的元素不能是display: none或visibility: hidden—— 屏幕阅读器会跳过 - 多个
id用空格分隔，其中任一不存在 → 整个属性失效 -
aria-label和aria-labelledby同时存在时，前者会完全覆盖后者
表单控件没 <label> 怎么补救
placeholder 不是 label，它既不被所有读屏识别，输入后还消失，无法持续提供上下文。补救顺序必须严格：
- 首选：补上带
for的<label>，哪怕视觉上用 CSS 隐藏（但保留可访问性） - 次选：仅当上下文极明确（如顶部有大标题“登录”，下方只有一个邮箱框），才用
aria-label="邮箱地址" - 禁用：
placeholder="邮箱地址"单独存在；也禁用aria-hidden="true"包裹 label 文本
特别提醒：<input type="file"> 错误加 aria-label 几乎无效，读屏仍固执地读“选择文件”，正确做法是配 <label for="xxx">上传头像</label> + 视觉隐藏文本。
错误提示怎么跟输入框建立可访问关联
红框+Toast 对视障用户等于没提示。必须用 aria-invalid 和 aria-describedby 组合：
- 出错时设
aria-invalid="true"（不是"false"或空字符串） - 错误文案容器必须有唯一
id，且通过aria-describedby="error-email"显式指向它 - 错误容器别用
display: none隐藏，改用opacity: 0; position: absolute;+aria-hidden="true"（校验通过时记得移除） - 校验恢复后，必须同时清除
aria-invalid和aria-describedby，否则残留提示会被反复播报
最易忽略的一点：动态表单中，JS 创建新字段时，id、for、aria-describedby 这三者必须原子性生成——漏掉任意一个，无障碍链就断了。
