label 的 for 属性必须与对应 input 的 id 完全一致（含大小写、连字符等），否则点击无响应、tab 跳过、屏幕阅读器失效；表格中需每行独立 id+label，复杂表头用 aria-labelledby，分组用 fieldset+legend。
label for 和 table cell 里的 id 必须逐字一致
表格里写 for="email" 却配了 id="user-email"，点击“邮箱”文字就完全没反应——浏览器不报错，但焦点死活进不去输入框。这种错误在表格中尤其隐蔽，因为 id 常被动态拼接（比如加行号），一不留神大小写、连字符或空格就对不上。
常见错误现象：label 点击无反馈、Tab 键跳过该单元格、屏幕阅读器只读“未命名控件”。
-
for值必须和对应input的id完全相同（包括所有符号、大小写、空格） - 不能用
class或name替代id；id在整页必须唯一，重复会导致for总指向第一个匹配项 - 动态渲染（如 React/Vue 渲染表格行）后，要确认
id真实存在于 DOM 中，且没被 JS 覆盖或清空
radio/checkbox 表格行必须每行单独绑定 label
很多人给整列写一个 label，比如：<th>是否启用</th> 下面每行一个 <input type="checkbox" name="enabled">——结果只有第一行能点，其余全失效。键盘无法 Tab 到具体选项，屏幕阅读器也只读一次“是否启用”，不说明当前行状态。
正确做法是：每行的 input 都有独立 id（如 enabled-1、enabled-2），每行配一个 label 指向它。
- 绝对不要共用
id，哪怕只是临时测试 - 若用嵌套写法（
<label><input>启用</label>），确保input是label内唯一可聚焦元素；里面不能再塞按钮或链接 - 表格头（
<th>）本身不能直接当 <code>label，必须通过aria-labelledby显式引用复杂表头用 aria-labelledby 替代 for
当表单字段的语义标签分散在多个地方——比如
<th id="price">价格</th>和旁边<td><span id="unit">（元）</span></td>共同构成完整提示，for就完全不够用了。这时必须用aria-labelledby="price unit"。它不是“可选优化”，而是 WCAG 合规刚需：所有现代读屏器按空格分隔的顺序朗读这些 id 对应的文本，用户才能听懂“价格（元）”。
-
aria-labelledby值是空格分隔的多个id，顺序 = 朗读顺序 - 所有被引用的
id必须真实存在，且不能是display: none或aria-hidden="true" - 旧版 IE 不支持，但 2026 年所有主流浏览器（Chrome/Firefox/Safari/Edge）已 100% 支持
- 不能和
for同时出现在同一个input上，优先级以aria-labelledby为准
fieldset + legend 在表格外做逻辑分组
表格内部无法塞
fieldset（HTML 规范禁止），但表单整体常嵌在表格里——比如后台管理页的“用户列表”表格每行带编辑操作。这时分组逻辑必须放在表格外部：用fieldset包住整个表格，legend作为总标题。这样屏幕阅读器会读作“用户管理组”，然后依次读出每行带
label的控件，而不是把整张表当一堆孤立字段处理。-
legend文字必须简洁明确，如“批量操作设置”，而非“请填写” - 禁用非当前步骤的
fieldset比 JS 控制单个input更轻量、更可靠 - 如果表格本身是展示用途，仅某几列含表单，则只对含表单的
tbody外层套fieldset，避免语义污染
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
