label 标签未正确配对会导致键盘用户和屏幕阅读器完全无法使用表单控件；for 与 id 必须字节级一致，显式绑定优于隐式包裹，动态渲染需确保 ID 唯一，错误提示须同步 aria-invalid 和 aria-errormessage。
label 标签没配对，就等于把输入框对键盘用户和屏幕阅读器“藏起来”了——不是体验差，是直接不可用。
label for 和 input id 必须字节级完全一致
浏览器和读屏软件只做字符串全等判断，大小写、连字符、下划线、空格、不可见字符（比如模板渲染时多出的换行）差一点，for 就找不到 id。
- 错误示例：
<label for="email">邮箱</label>+<input id="Email">（大小写不一致） - 错误示例：
<label for="user_email">邮箱</label>+<input id="user-email">（下划线 vs 连字符） - 安全做法：复制粘贴
id值到for中；React/Vue 中用变量绑定，比如htmlFor={id}或:html-for="id" - 快速验证：控制台执行
document.getElementById("xxx")，看是否返回目标元素；再查document.querySelectorAll('[id="xxx"]').length是否为 1
显式绑定（for+id）比隐式包裹更可靠
把 input 写进 label 里看似省事，但在旧版 NVDA/JAWS、部分自动化测试工具、或 DOM 动态插入注释/换行后，关联极易断裂。WCAG 2.1 A 级明确要求显式绑定。
- 禁用：
<label>用户名<input name="username"></label>（尤其 SSR 或循环渲染场景） - 允许但受限：
<label>接收通知 <input type="checkbox" name="notify"></label>，仅限单控件、无 JS 动态操作、无换行/注释干扰的简单场景 - 绝对禁止：
<label for="x">...</label><label><input id="x"></label>（混用显隐式，部分浏览器触发两次 focus） - 自定义组件（如 Ant Design 的
Switch）若未透传tabindex或role，即使包在label里，键盘也无法聚焦
动态渲染和表单分组时的 ID 唯一性是隐形雷区
服务端渲染、Vue v-for、React map 生成多个表单项时，硬编码 id="phone" 会导致所有 for 指向第一个控件——用户点第 5 行的 label，光标跳到第 1 行。
立即学习“前端免费学习笔记（深入）”；
- 必须动态拼接唯一 ID：
id="user-phone-{{uid}}"、id={`email-${index}`} - 一组
radio必须逐项绑定：<input id="gender-m" name="gender" value="m"><label for="gender-m">男</label>，不能用一个label包整组 - 分组必用
fieldset+legend：<fieldset><legend>偏好设置</legend>...</fieldset>；仅用<div class="group">，读屏器无法识别逻辑关系 -
select的label最好紧邻它，中间不要插<p>或<div>，iOS VoiceOver 对 DOM 位置敏感
错误提示、必填和隐藏处理必须同步无障碍状态
仅加 required 或红边框，屏幕阅读器用户根本不知道哪错了。JS 校验后不设 aria-invalid，就等于没报错。
- 校验失败时：
input.setAttribute('aria-invalid', 'true')+input.setAttribute('aria-errormessage', 'err-id') - 错误文案容器不能
display: none，否则读屏器跳过；改用clip: rect(1px, 1px, 1px, 1px)或aria-hidden="true"配合visibility: hidden -
placeholder不是label，视觉一输就消失，辅助技术也不认；禁用<input placeholder="邮箱">单独存在 - 隐藏原生
select时，禁用display: none；自定义下拉必须透传ArrowDown/Enter等键盘事件
真正卡住人的从来不是语法怎么写，而是 id 是否精准、是否在动态上下文中保持唯一、以及是否把 aria-invalid 和 aria-errormessage 当成和 value 一样需要手动同步的状态来维护。
