label与input未正确关联会导致屏幕阅读器无法识别字段名，核心原因是for属性值与input的id值不严格匹配（大小写、空格、不可见字符等），显式关联是唯一稳定方式。
label 和 input 没正确关联，屏幕阅读器就“读不到”字段名——这不是兼容性问题，是直接失效。
label 的 for 属性必须严格匹配 input 的 id
显式关联是唯一稳定可靠的方式。常见错误是大小写不一致、id 值带空格、或前后多出不可见字符（比如模板引擎注入的换行）。
-
for值和id必须完全相等，包括大小写、连字符、下划线，不能有首尾空格 - 避免用 JS 动态拼接
id后忘记同步更新for，尤其在循环渲染表单项时 - 禁用隐式包裹写法：
<label>用户名<input name="username"></label>—— DOM 中插入注释、换行或动态节点极易断开关联 - 不要用
aria-label或title替代label：它们无法触发点击聚焦，且部分读屏软件会跳过或重复播报
select 下拉框的 label 关联更敏感
iOS VoiceOver 对 label 和 select 的 DOM 位置有隐含要求：两者最好相邻，中间不能插 <p></p>、<div> 等块级元素，否则点击 label 文本可能无法聚焦到下拉框。<ul>
<li>优先用 <code><label for="xxx">文本</label><select id="xxx"></select> 结构，确保紧邻
select 的第一个 option 不要用纯空格或 "请选择" 作为占位；应设为 <option value="" disabled selected>-- 请选择 --</option>
display: none 或 visibility: hidden 隐藏原生 select —— 自定义下拉必须透传焦点和键盘事件（如 ArrowDown、Enter）到它身上复杂控件需要 aria-describedby 补充说明
当字段有格式要求、长度限制或业务规则时，仅靠 placeholder 或视觉提示不够。屏幕阅读器用户需要明确听到这些约束。
- 把描述文字单独写成一个
<span id="desc-id">至少8位，含字母和数字</span> - 在
input上加aria-describedby="desc-id"，读屏软件会在获得焦点时自动连读 - 多个描述可空格分隔：
aria-describedby="desc-id error-id" - 不要把描述塞进
aria-label—— 它会完全覆盖label文本，导致字段名丢失
表单验证失败时，错误信息必须可感知
只加 required 或 pattern 不够。浏览器原生报错（如 “Please fill out this field”）既不本地化，也不被所有辅助技术捕获。
- 手动调用
input.checkValidity()后，用input.setCustomValidity("手机号格式不对")设置中文提示 - 错误文案需绑定到具体元素：
<span id="err-username" role="alert"></span>，再用aria-errormessage="err-username"关联 - 状态标记要准确：
aria-invalid="true"仅在用户已输入且校验失败时设置，提交前清空 - 禁用
oninvalid事件做 UI 提示 —— 它不触发实时反馈，且在 Safari 中行为不一致
最容易被忽略的是：label 和控件之间 DOM 顺序错位、自定义下拉没透传键盘事件、以及错误提示没用 role="alert" 或未关联到输入框。这些不是“锦上添花”，而是让表单对一部分用户彻底不可用的硬伤。
