label的for属性必须与input的id严格逐字符匹配，否则屏幕阅读器无法识别字段用途、点击失效、tab聚焦异常；大小写、空格、连字符等任一差异均导致绑定断裂。
label 标签是屏幕阅读器识别表单字段用途的唯一可靠依据，没它或写错，视障用户听到的就只是“编辑文本”“复选框”，完全不知道该填什么。
为什么 for 和 id 必须严格字符级匹配
屏幕阅读器靠 label 的 for 属性和 input 的 id 做纯字符串比对——大小写、下划线、空格、连字符、首尾空白，全算在内。哪怕 JS 动态拼 ID 时多一个 - 或模板里换行符被当空格处理，关联就断了。
-
for="userName"对应id="username"→ 失效（大小写不一致） -
for="email "（尾部有空格）对应id="email"→ 失效 - 循环渲染中用
id="email-${index}"却忘了同步更新for→ 只有第一个生效
嵌套写法看似简单，实际更易出问题
写成 <label>姓名<input name="name"></label> 看似省事，但中间插入注释、换行、或框架 diff 插入临时节点，都可能导致 DOM 解析失败，读屏器直接跳过整个 label 文本。
- React/Vue 中动态内容容易破坏嵌套结构
- 无法用 CSS 独立控制 label 和 input 的间距或响应式顺序
- fieldset 分组里嵌套易导致语义层级混乱
- 部分旧版 NVDA 或 Android TalkBack 对块级子元素（如
<div>）会中断朗读 <h3>select 和自定义下拉的 label 关联特别敏感</h3> <p>iOS VoiceOver 和某些 Windows 屏幕阅读器要求 <code>label和select在 DOM 中必须紧邻，中间不能插<p></p>、<div> 等块级元素。否则点击 label 文本，焦点根本落不到下拉框上。 <ul> <li>禁用 <code>display: none或visibility: hidden隐藏原生select—— 这会让它彻底从可访问树中消失 - 自定义下拉必须透传键盘事件（
ArrowDown、Enter）并保持焦点链完整 - 别用 placeholder 或“请选择”占位，它们不是标签，且输入时消失、读屏器常忽略
什么时候该用 aria-labelledby 而不是 label
当页面中已有可见文本（比如 <h2 id="search-title">站内搜索</h2>），且你想复用它作为搜索框的标签时，aria-labelledby 是更合适的选择。
-
aria-labelledby指向的是真实存在的、用户能看见的元素id，屏幕阅读器会朗读其文本内容 - 别同时写
aria-label和内部文本，会导致重复播报 - 别指向不存在的
id，读屏软件会静默跳过，不报错也不提示 - 格式说明、错误提示等辅助信息，优先用
aria-describedby关联<div id="hint">请输入 6–12 位密码</div>
最容易被忽略的点是：label 不仅关乎“读得出来”，更决定“点得进去”。哪怕视觉样式完美，只要 for/id 匹配出一丝偏差，鼠标用户点标签失焦、键盘用户 Tab 进去没反应、屏幕阅读器报不出字段名——三者其实是同一问题的三种表现。
