label 与 input 的 id 和 for 值必须逐字符完全一致，否则屏幕阅读器直接跳过字段名；须禁用隐式包裹、严格使用显式关联或唯一直接子节点包裹；select 和 radio/checkbox 组需遵循紧邻布局与 fieldset/legend 规范；aria-label 和 placeholder 不可替代 label。
label 和 input 的 id 与 for 值必须完全一致
不一致就等于没关联——屏幕阅读器根本不会读出字段名，用户不知道该填什么。这不是“可能读错”，是直接跳过。
常见错误包括：for="userName" 对应 id="username"（大小写不匹配）、id=" phone "（首尾空格）、id="user-id" 但 for="user_id"（连字符 vs 下划线）。模板引擎渲染时还容易混入不可见换行符或 零宽空格。
- 手动检查 DOM 中的
id和for值是否逐字符相等，用浏览器开发者工具复制粘贴比对 - 避免 JS 动态生成
id后忘记同步更新for，尤其在v-for或.map()渲染表单项时 - 服务端模板（如 Jinja、Twig）中注意变量插值前后是否带空格或换行
禁用隐式包裹写法：<label>文本<input></label>
看似省事，实则脆弱。只要中间插入注释、换行、<span> 或 React/Vue 的条件节点，DOM 结构就断开，关联失效。
iOS VoiceOver 和 NVDA 在这类结构下表现尤其不稳定，有时能读、有时跳过，测试难以复现但线上真实发生。
立即学习“前端免费学习笔记（深入）”；
- 一律改用显式关联：
<label for="email">邮箱</label><input id="email" name="email"> - 如果必须用包裹结构（如设计约束），确保
input是label的**唯一直接子节点**，且中间无任何文本节点（包括换行） - 用 Lighthouse 或 axe DevTools 扫描时，“
label不关联控件”错误多数源于此
select 和 radio/checkbox 组合的 label 关联更敏感
select 对 DOM 位置极其敏感：iOS VoiceOver 要求 label 和 select 必须紧邻，中间不能插 <p>、<div> 或其他块级元素，否则点击 label 文本无法聚焦到下拉框。
radio/checkbox 组必须用 <fieldset><legend> 包裹，否则屏幕阅读器无法识别“这是同一组选项”，会把每个单选按钮当成独立字段读。
-
select前后不要加空<div>或<br>；若需间距，用 CSSmargin而非结构元素 - radio 组示例：
<fieldset><legend>性别</legend><label><input type="radio" name="gender" value="m">男</label></fieldset> -
<option>不要用纯空格或“请选择”占位，应设为<option value="" disabled selected>-- 请选择 --</option>
别用 aria-label 或 title 替代 label
aria-label 能让屏幕阅读器读出来，但它无法触发点击聚焦——用户点标签文字，光标不会落到输入框上。这是交互断裂，不是信息缺失。
title 更糟：多数读屏软件默认忽略它，且鼠标悬停才显示，对键盘用户和视障用户完全无效。
- 只有两种合法替代方案：
<label for="xxx">显式关联，或<label>...<input></label>严格包裹 - 若视觉上不能显示 label 文字（如搜索框图标旁），用
visually-hidden类隐藏，而非display: none或aria-label - placeholder 不是 label 替代品：它在输入后消失，无法持续提示，也不被所有读屏软件播报
复杂点在于：可访问性不是“加了 label 就完事”，而是整个 DOM 结构、属性值、渲染顺序都得严丝合缝。一个空格、一次动态渲染疏忽、一行多余 HTML，都足以让视障用户卡在第一个字段。
