表单可访问性需确保label与input的id严格一致，使用fieldset+legend进行逻辑分组，合理选用aria-label或aria-labelledby，自定义控件须手动同步aria状态并支持键盘操作。
label 与 input 的 ID 绑定必须严格一致
很多表单在 Lighthouse 检测中报 “Form elements do not have associated labels”，根本原因不是没写 <label></label>，而是 for 属性值和对应 <input> 的 id 不匹配——大小写、空格、拼写错误都会导致绑定失效。
常见错误现象：
-
<label for="email">Email</label>对应<input id="Email">（大小写不一致） -
<label for="user-name"></label>对应<input id="username">（连字符 vs 无连字符） - 动态生成的 ID 被 JS 修改过，但
for值未同步更新
实操建议：
- 手写时统一用小写字母 + 下划线或中划线，例如
id="first_name"配for="first_name" - 用构建工具或框架（如 React）时，确保 JSX 中
htmlFor和id同步生成，避免硬编码字符串 - 用浏览器开发者工具检查：选中
<label></label>→ 查看 computed panel 中的 “Accessibility” 标签页 → 确认 “Name” 是否可读、是否关联到正确控件
fieldset + legend 是分组可访问性的强制要求
当表单包含逻辑分组（如“收货地址”“账单地址”“支付方式”），仅靠 CSS 或 div 包裹无法被屏幕阅读器识别为一组。必须用 <fieldset></fieldset> + <legend></legend>，否则辅助技术会把所有控件平铺处理，丧失结构语义。
容易踩的坑：
- 用
<div class="group"> 替代 <code><fieldset></fieldset>，即使加了 ARIA role="group" 也不如原生语义可靠 -
<legend></legend>内容为空、或仅含图标（如<svg></svg>），导致无障碍名称缺失 - 多个
<fieldset></fieldset>嵌套过深，或中间混入未闭合标签（如漏写），引发浏览器解析错乱，后续控件可能被吞掉 - 每个
<fieldset></fieldset>必须有且仅有一个<legend></legend>，文字需简洁明确（如 “Shipping Information”，而非 “Section 2”） - 若视觉上不希望显示
<legend></legend>，用clip-path: inset(100%)或position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;隐藏，但保留可访问性 - 用 HTML validator 工具检查嵌套层级，确认所有
<fieldset></fieldset>正确闭合 - ✅ 用
aria-label：控件完全无文本内容（如<button aria-label="Delete item"><i class="icon-trash"></i></button>） - ✅ 用
aria-labelledby：标签文本存在于别处（如表格行首有标题单元格，复选框需引用它） - ❌ 不要用
aria-label：已有<label for="xxx">Email address</label>，再加aria-label会导致重复朗读 -
aria-label值会被所有主流屏幕阅读器（NVDA、VoiceOver、JAWS）优先读取，但若值含冗余词（如 “Button: Submit form”），会降低信息密度 -
aria-labelledby支持跨元素组合文本，但需确保引用的 ID 真实存在且未被display: none或aria-hidden="true"屏蔽 - 为自定义开关容器添加
role="switch"，并同步控制aria-checked="true/false"（JS 监听 change 事件更新） - 为星级评分容器添加
role="radiogroup"，每颗星用<input type="radio">或带role="radio"的元素，并设aria-checked和aria-posinset/aria-setsize - 所有自定义控件必须支持键盘操作：Tab 进入、Space/Enter 触发、方向键切换（如星级）
实操建议：
aria-label 和 aria-labelledby 的适用边界
当控件没有可见文本标签（如汉堡菜单按钮、纯图标复选框、隐藏的文件上传按钮），aria-label 是最直接的补救方案；但滥用它会覆盖原本存在的 <label></label>，反而破坏语义。
使用场景判断：
性能与兼容性影响：
自定义控件（如开关、评分星）必须手动注入可访问状态
纯 CSS 实现的开关（<input type="checkbox"> + <label></label>）、SVG 星级评分，视觉上可交互，但默认不具备 role、aria-checked、aria-valuenow 等状态属性，屏幕阅读器无法感知当前值或操作反馈。
关键动作：
最容易被忽略的一点：即便用了 aria-* 属性，若没监听键盘事件并手动更新 DOM 属性，状态就会与实际脱节——比如用户按空格切换了开关，但 aria-checked 仍为 false，辅助技术就永远读不到真实状态。
