label 的 for 属性与 input 的 id 必须逐字符完全一致，大小写、空格、符号均敏感；radio/checkbox 每项需独立 label 关联唯一 id；fieldset+legend 是分组唯一语义方案，legend 必为首个子元素且不可隐藏。
label for 和 input id 必须逐字符完全一致
屏幕阅读器识别表单字段名，只认 label 的 for 属性和 input 的 id 是否严格相等——差一个空格、大小写不一致、多一个下划线，就等于没关联。
-
for="email"对应id="user-email"→ 失效（常见于模板拼接后忘记同步） -
for="phone"对应id="Phone"→ 失效（大小写敏感） -
for="zip-code"对应id="zip code"→ 失效（空格不允许出现在id中） - 用 DevTools 的 Accessibility 面板检查元素时，“Name”字段为空，说明关联失败
radio/checkbox 组每个控件都要独立 label
一组同名 radio 或 checkbox，如果只写一个 label 包裹全部，屏幕阅读器只会把“标题”读给第一个控件，其余项失去语义，键盘 Tab 会跳过它们。
- 错误写法：
<label>请选择城市</label><input type="radio" name="city" value="bj">北京→ 后续选项不可点击、不可朗读 - 正确写法：每个选项配独立
label，且for指向唯一id：<label for="city-bj">北京</label><input id="city-bj" type="radio" name="city" value="bj"> - 同名
name是必须的，但id绝对不能重复——重复会导致for总是指向第一个匹配项
避免 aria-label 与 label 冗余冲突
当一个 input 同时有 label 关联和 aria-label，且文本内容相同，ARC Toolkit 等工具会报“重复标签”，更严重的是部分屏幕阅读器可能忽略原生 label，只读 aria-label，破坏焦点顺序。
- 优先用原生
label，禁用aria-label替代方案 - 若需补充说明（如格式要求），用
aria-describedby指向独立<div id="hint">请输入11位手机号</div> - 自定义下拉、日期选择器等复杂控件，必须透传焦点到原生
select或input，不能靠aria-label“打补丁”
fieldset + legend 是分组语义的唯一可靠方式
视觉上堆在一起的复选框或单选按钮，对屏幕阅读器来说只是零散的控件——没有 fieldset 和作为首个子元素的 legend，它们无法被识别为逻辑组，上下文丢失。
-
legend必须是fieldset的第一个子元素，不能用div或span模拟 - 嵌套
fieldset时，每个都必须有自己独立的legend，否则语义坍塌 - 单个开关控件（如“记住我”）不需要
fieldset，加了反而干扰阅读顺序 - 漏闭合
会导致后续 DOM 被吞进该分组，结构彻底错乱
id 和 for 值不一致，以及 legend 被 CSS 隐藏后未用 visually-hidden 类保留可访问性。这些细节不调试，光看页面是看不出问题的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
