label的for属性必须与input的id严格一致才能生效，否则会导致点击无响应、屏幕阅读器无法识别、Tab键跳过等问题；常见错误包括连字符不一致、大小写不一致、混淆name与id、动态渲染时id为空或重复。
label for属性必须和input id完全一致才能生效
浏览器不会自动把相邻的 label 和 input 关联起来，哪怕它们在 DOM 中紧挨着。点击没反应、屏幕阅读器读不出标签、Tab 键跳过控件——这些几乎都源于 for 和 id 不匹配。
常见错误包括：
-
for="user-name"对应id="username"（连字符不一致） -
for="email"对应id="Email"（大小写不一致） -
for="phone"对应name="phone"（for只认id，不认name） - 动态渲染时
id为空或重复（如 React 中id={`input-${index}`}但index未定义）
验证方法：在开发者工具中选中 label，看右侧 Elements 面板的 for 值能否高亮跳转到对应 input#xxx；手动点击文字，确认控件是否获得焦点或切换状态。
嵌套写法更简单，但有结构限制
把 input 直接写进 label 标签内部，是隐式关联方式，不需要 for 和 id，语义和行为都可靠。
立即学习“前端免费学习笔记（深入）”；
但要注意边界条件：
- 只能包裹原生可聚焦控件：
input、textarea、select、button，不能包div或自定义组件 - 不能中间插层：
<label><div><input></div></label>会断裂语义，部分读屏无法识别 - 嵌套后，
label.control在 Chrome/Firefox 中能返回控件，但该 API 不是标准，别在逻辑中依赖它
适合场景：表单结构简单、复选框/单选按钮组、不想管理 ID 的静态页面。
radio/checkbox 每个选项都要独立 label
一组 radio 共享同一个 name，但每个选项必须配单独的 label，否则键盘用户无法用方向键切换、屏幕阅读器无法逐项朗读、移动端点击区域太小。
错误写法：<label for="gender">性别</label><input type="radio" name="gender" value="m">男<input type="radio" name="gender" value="f">女 —— 这里只有一个 label，且 for 指向不存在的 id。
正确做法（显式）：
<label for="gender-m">男</label> <input type="radio" name="gender" id="gender-m" value="m"> <label for="gender-f">女</label> <input type="radio" name="gender" id="gender-f" value="f">
或（嵌套）：
<label><input type="radio" name="gender" value="m">男</label> <label><input type="radio" name="gender" value="f">女</label>
aria-labelledby 是补充，不是替代
当 label 文字分散在多个元素中（比如表格头 + 单元格提示），或者控件本身没有 id（如某些 Web Component 封装的输入框），可以用 aria-labelledby 指向多个 id，空格分隔。
但它不提供原生点击聚焦能力：点击那些被引用的文本，不会让控件获得焦点，只影响辅助技术的朗读顺序。
关键约束：
-
aria-labelledby不能代替for/id显式绑定 —— 缺失后者，键盘操作和基础可访问性就失效 - 值必须是空格分隔的合法
id列表，不能含逗号或换行 - 若目标
id不存在，部分读屏会静默忽略，不报错也不朗读
真实项目中，优先保证 for+id 或嵌套，再用 aria-labelledby 补充多源描述，而不是反过来。
最容易被忽略的是「一致性」：同一页面中，相同功能的控件（比如所有邮箱输入框）应该用同一种关联方式，避免混合使用导致测试难覆盖、维护成本上升。ID 冲突、动态渲染漏 ID、CSS 层叠拦截点击（pointer-events: none）这些看似无关的问题，往往都会表现为 label 点击失效，排查时得一层层剥开看。
