label 的 for 属性必须严格匹配 input 的 id；for 只认 id 不认 name，动态生成需确保 id 合法；嵌套写法仅适用于单控件且语义易断裂；radio/checkbox 每项须独立 id+for；自定义控件须用 aria-label 补充名称。
label 的 for 属性必须严格匹配 input 的 id
点击文字没反应、屏幕阅读器读不出字段名、Tab 键跳过控件——这些问题 90% 都出在这里。for 不是随便写个名字就行，它必须和某个 input 的 id 完全一致，包括大小写、连字符、下划线，甚至不能多一个空格。
-
for="user-name"必须对应id="user-name"，写成id="username"或id="User-Name"都失效 -
for只认id，不认name；input没有id，for就完全不起作用 - 动态生成时（如 React 的
id={`email-${index}`}），要确保index有值且不为undefined或null，否则生成id="email-"这种非法值 - 用浏览器 DevTools 点开
label，看右侧for值能否点击跳转到对应input#xxx；再手动点文字，确认焦点是否落到控件上
嵌套写法看似简单，但只适用于单控件静态场景
把 input 直接放进 label 里，确实不用管 for 和 id，语义天然成立。但它不是万能解法，很多实际项目一用就翻车。
- 只能包裹一个可聚焦控件：
input、textarea、select、button；包div或自定义组件会直接断裂语义 - 不能用于一组
radio：一个label包住多个input[type="radio"]，只会让第一个响应点击，其余不可聚焦 - 中间插入注释、换行、或 JS 动态插入节点（比如加个 loading 图标），都可能让
input脱离label的直接子树范围 - 部分旧版读屏（如 JAWS 2018）对嵌套支持不稳定，尤其当
label内含 SVG 或按钮时
radio/checkbox 每一项都得配独立 id + for
共享 name 是为了分组，但每个选项必须有自己唯一的 id 和对应的 label[for]。否则键盘用户无法用方向键切换，屏幕阅读器也读不出“选中的是男还是女”。
- 错误写法：
<label for="gender">性别</label><input type="radio" name="gender" value="m">男——for="gender"指向的id根本不存在 - 正确显式写法：
<input type="radio" id="gender-m" name="gender" value="m"><label for="gender-m">男</label> - 正确嵌套写法：
<label><input type="radio" name="gender" value="m">男</label>（注意：每个选项单独一个label） - 别用同一个
id绑定多个input，浏览器只关联第一个，后续静默失效
自定义控件必须用 aria-label 补充可访问名称
纯图标按钮（如 <div class="hamburger"></div>）、封装的输入框、或 Web Component，本身没有文本内容，label 即使绑了 for 也会被 Lighthouse 报错：“Form elements do not have associated labels”。
- 首选方案：
<label for="nav-toggle" aria-label="Toggle navigation menu"></label>——aria-label提供可解析的名称 - 避免用
title替代：title只在鼠标悬停时显示，对键盘和读屏用户完全无效 - 不要靠 CSS 隐藏文字（如
text-indent: -9999px），必须保留可被辅助技术读取的文本节点或 ARIA 名称 - 如果是
<button></button>而非label+input组合，直接在button上设aria-label，别额外套label
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
