label 必须通过 for 与 input 的 id 显式配对，或让 input 直接嵌套在 label 内；id 值需唯一、严格匹配、符合规范，否则点击无效、屏幕阅读器无法识别。
label 标签没绑对，屏幕阅读器就“读不出字段名”，用户点文字也不聚焦——这不是样式问题，是语义断裂，必须用 for 和 id 显式配对，或确保 input 真实嵌套在 label 内部。
for 属性必须严格匹配 input 的 id
浏览器和辅助技术只认 id 字符串，完全不看 name、class 或位置关系。哪怕 for="email" 和 name="email" 一模一样，只要 input 没写 id="email"，点击就无效。
-
for="username"必须对应<input id="username">；id="UsernamE"、id="user_name"、id=" user-name "（含空格）都会断联 - 控件缺失
id是最常见错误：<label for="phone">电话</label><input name="phone">→ 点击无反应 - 多个控件共用同一
id（如循环渲染未加唯一标识），for只绑定到 DOM 中第一个元素，行为不可预测 - 用开发者工具选中
label，复制其for值，在控制台执行document.getElementById("xxx")验证是否存在且唯一
radio/checkbox 组每个选项都要独立 label
一组 radio 共享 name，但每个选项必须有独立 id 和独立 label。否则屏幕阅读器无法告知用户“当前焦点在‘男’还是‘女’”，也无法通过点击文字切换指定选项。
- 错误写法：
<label>性别:<input type="radio" name="gender" value="m">男<input type="radio" name="gender" value="f">女</label>→ 只有第一个input可响应 - 正确写法：
<input type="radio" id="gender-m" name="gender" value="m"><label for="gender-m">男</label>，同理配gender-f - 共用说明文字（如“请选择性别”）应放在
<fieldset><legend>里，而非包裹全部选项的label中
嵌套 label 看似简单，但容易断裂
把 input 直接放进 label 里，确实不用写 for 和 id，但 DOM 结构稍有变动就会断开关联。
立即学习“前端免费学习笔记（深入）”；
- 中间插入注释、换行符、或 JS 动态插入节点（如 loading spinner），都可能让
input脱离label的直接子树范围 - 部分旧版屏幕阅读器（如 JAWS 2018 及更早）对嵌套方式支持不稳定，尤其当
label内含复杂结构时 - 若
label里需要加图标、SVG 或按钮控件，嵌套会破坏语义层级，此时显式for+id更可控 - 嵌套写法仅适用于单个原生控件；
radio组、<fieldset>内部、JS 动态移动后的控件都不适用
自定义控件（如汉堡菜单）必须提供可访问名称
纯图标按钮（如 <div class="hamburguer"></div>）没有文本内容，即使 label 绑定了 for，也会被 Lighthouse 报 “Form elements do not have associated labels” 错误。
- 首选方案：给
label加aria-label，例如<label for="nav-control" aria-label="Toggle navigation menu"> -
aria-label值应使用动词短语（如Toggle navigation），避免模糊表述（如Menu或Button） - 不要用
title替代aria-label：title只在悬停时显示，对键盘和屏幕阅读器用户无效 - 若控件是
<button>而非label+input组合，应直接在button上设aria-label，而非额外套label
最容易被忽略的是动态生成场景下的 ID 稳定性：Vue/React 中若用 {id} 插值，需确认变量非空且符合 HTML ID 规范（不能以数字开头，不能含空格）；模板循环渲染时，必须用唯一标识拼接 id，否则所有 label 都绑到第一个控件上。
