label点击无反应、屏幕阅读器读不出字段名，90%是for与id字符串不完全一致所致；必须逐字符严格相等（含大小写、连字符、下划线、空格及不可见字符），且动态渲染时ID需稳定唯一、真实存在。
label 点击没反应、屏幕阅读器读不出字段名，90% 是 for 和 id 字符串不完全一致导致的——浏览器不报错，但绑定直接失效。
检查 for 与 id 是否逐字符严格相等
大小写、连字符、下划线、空格、不可见字符（如模板渲染时混入的换行）差一个，for 就不工作。这不是容错场景，是精确字符串匹配。
-
for="email"必须对应<input id="email">；id="Email"、id="user_email"、id="email "（末尾空格）全部无效 -
for="search-input"对应<input id="search-input">；id="searchinput"或id="search_input"都断开关联 - 用 DevTools 选中
<label></label>，看右侧for值，然后Ctrl+F全局搜索该字符串是否作为id存在且仅出现一次 - 动态渲染（React/Vue）时，确认
id没被拼错（如id={`user-${index}`}中index为undefined→ 实际生成id="user-"）
radio/checkbox 组必须每个选项单独配 id 和 for
一组 <input type="radio"> 共享 name，但每个选项必须有唯一 id，且每个 <label for="xxx"></label> 只能绑定一个控件。否则键盘无法方向键切换、屏幕阅读器无法区分“男”或“女”。
- 错误：
<label for="gender">性别</label><input type="radio" name="gender" value="m">男（id缺失，for指向不存在的id） - 正确：为每个选项设独立
id，并各自配<label for="gender-m">男</label>和<label for="gender-f">女</label> - 嵌套写法可行但受限：
<label><input type="radio" name="gender" value="m">男</label>—— 仅适用于单个原生控件，不能包住整组，也不能用于自定义组件 - 整组语义需靠
<fieldset><legend>性别</legend></fieldset>补充，否则辅助技术可能跳过整组
避免 CSS 或 JS 暗中破坏点击行为
结构写对了，但点击仍无反应？问题常藏在样式或脚本里，而非 HTML 本身。
立即学习“前端免费学习笔记（深入）”；
-
pointer-events: none设在<label></label>或任意父级上，会拦截所有点击事件 -
user-select: none在某些 Android WebView 中会抑制 click 冒泡；应改用-webkit-user-select: none+-moz-user-select: none，保留标准属性为text -
<input>被设为display: none或visibility: hidden→ label 点击后控件无法获得焦点；可用position: absolute; opacity: 0; width: 1px; height: 1px;替代 -
<input disabled>时，即使for/id正确，label 点击也无效
复杂表单优先用 aria-labelledby，不是 for
当标签文字分散在多个元素中（如表格表头 <th id="price">价格</th> + 单元格内单位说明），或需要复用已有文本（如弹窗标题作字段说明），for 完全不够用。
-
aria-labelledby="price unit"引用多个id，空格分隔，顺序即朗读顺序 - 所有被引用的
id必须真实存在于 DOM 中，且不能是display: none或aria-hidden="true" -
aria-labelledby和for不能共存于同一<input>，前者优先级更高 - 旧版 IE 不支持，但 2026 年所有主流浏览器（Chrome/Firefox/Safari/Edge）已 100% 支持
最易被忽略的是：动态渲染时 ID 的生成逻辑是否稳定、是否在 DOM 中真实存在、是否被 JS 覆盖或重复；以及移动端 CSS 隐式禁用 pointer-events 或 user-select 后，label 看似正常却静默失效。这些点不报错，但可访问性直接归零。
