label标签是表单可访问性、可用性和语义化的基础，必须通过for+id显式绑定或嵌套input两种方式实现；所有可交互原生控件均需配label，且文本须明确、一致，不可用placeholder替代。

label 标签不是可有可无的装饰，它是表单可访问性、可用性和语义化的基础支撑 —— 没它，屏幕阅读器读不出“这是邮箱输入框”，用户也点不了文字就聚焦，更别提 WCAG 合规。

label 怎么绑定 input 才算有效

只有两种方式被浏览器真正识别：显式用 for 属性 + id 匹配，或隐式把 input 嵌套进 label 里。其他写法（比如只靠相邻位置、靠 class 名、靠 name）都不触发焦点传递或无障碍语义。

• for 的值必须和目标元素的 id 完全一致，包括大小写和空格 —— for="email" 和 id="Email" 就是失败的
• 嵌套方式下，input 必须在 label 开始与结束标签之间，不能靠 JS 动态插入，否则语义不成立
• 同一个 id 不能被多个元素共用，否则 for 关联会随机指向其中一个，且校验工具会报错

哪些表单控件必须配 label

所有可交互的原生表单控件都应有 label，尤其以下几类一旦缺失，可访问性直接掉线：

• input[type="text"]、input[type="email"]、input[type="password"]、textarea、select —— 缺 label，屏幕阅读器无法告知用户“该填什么”
• input[type="checkbox"] 和 input[type="radio"] —— 缺 label，用户只能靠点击极小的框/圆点操作，移动端几乎点不准
• 一组 radio 中每个选项都要独立 label，不能只给整个组加一个说明文字

label 和 aria-label 能不能混用

可以，但目的不同，不能互相替代：

• label 是 HTML 语义层的强制关联，影响焦点行为、表单提交逻辑、辅助技术遍历顺序
• aria-label 是 ARIA 层的补充描述，仅作用于辅助技术，不改变 DOM 行为 —— 即使写了 aria-label，没 label 仍会导致键盘 Tab 焦点跳过该控件
• 隐藏视觉 label 时（如用 CSS visually-hidden 类），保留 label 元素比只留 aria-label 更可靠，因为部分旧版读屏对 ARIA 支持不稳定

容易被忽略的坑：label 里的文本内容本身就有约束

label 文本不是随便写的说明，它会作为控件的“可访问名称（accessible name）”被读出，所以：

• 避免纯符号或模糊表述，比如“填写这里”“点我”“↓” —— 屏幕阅读器会照读，毫无信息量
• 不要在 label 里塞大段帮助文本，辅助技术通常只读前几十个字符；额外说明应放 aria-describedby 指向 div 或 span
• 如果控件已有占位符（placeholder），它不能代替 label —— placeholder 会在输入时消失，且多数读屏不读它

最常被绕开的其实是「一致性」：同一页面中，相同功能的控件（比如所有邮箱输入框）label 文本最好统一措辞，否则辅助技术用户会困惑是否是不同字段。