label标签是表单可访问性、可用性和语义化的基础，必须通过for+id显式绑定或嵌套input两种方式实现；所有可交互原生控件均需配label，且文本须明确、一致，不可用placeholder替代。
label 标签不是可有可无的装饰，它是表单可访问性、可用性和语义化的基础支撑 —— 没它，屏幕阅读器读不出“这是邮箱输入框”，用户也点不了文字就聚焦，更别提 WCAG 合规。
label 怎么绑定 input 才算有效
只有两种方式被浏览器真正识别：显式用
属性 +
匹配，或隐式把
嵌套进
里。其他写法（比如只靠相邻位置、靠 class 名、靠 name）都不触发焦点传递或无障碍语义。
的值必须和目标元素的
完全一致，包括大小写和空格 ——
和
就是失败的
嵌套方式下，
必须在
开始与结束标签之间，不能靠 JS 动态插入，否则语义不成立
同一个
不能被多个元素共用，否则
关联会随机指向其中一个，且校验工具会报错
哪些表单控件必须配 label
所有可交互的原生表单控件都应有
，尤其以下几类一旦缺失，可访问性直接掉线：
、
、
、
、
—— 缺 label，屏幕阅读器无法告知用户“该填什么”
和
—— 缺 label，用户只能靠点击极小的框/圆点操作，移动端几乎点不准
一组
中每个选项都要独立
，不能只给整个组加一个说明文字
label 和 aria-label 能不能混用
可以，但目的不同，不能互相替代：
是 HTML 语义层的强制关联，影响焦点行为、表单提交逻辑、辅助技术遍历顺序
是 ARIA 层的补充描述，仅作用于辅助技术，不改变 DOM 行为 —— 即使写了
，没
仍会导致键盘 Tab 焦点跳过该控件
隐藏视觉 label 时（如用 CSS
类），保留
元素比只留
更可靠，因为部分旧版读屏对 ARIA 支持不稳定
容易被忽略的坑：label 里的文本内容本身就有约束
label 文本不是随便写的说明，它会作为控件的“可访问名称（accessible name）”被读出，所以：
避免纯符号或模糊表述，比如“填写这里”“点我”“↓” —— 屏幕阅读器会照读，毫无信息量
不要在 label 里塞大段帮助文本，辅助技术通常只读前几十个字符；额外说明应放
指向
或
如果控件已有占位符（
），它不能代替
—— placeholder 会在输入时消失，且多数读屏不读它
最常被绕开的其实是「一致性」：同一页面中，相同功能的控件（比如所有邮箱输入框）label 文本最好统一措辞，否则辅助技术用户会困惑是否是不同字段。
foridinputlabelforidfor="email"id="Email"inputlabelidforlabelinput[type="text"]input[type="email"]input[type="password"]textareaselectinput[type="checkbox"]input[type="radio"]radiolabellabelaria-labelaria-labellabelvisually-hiddenlabelaria-labelaria-describedbydivspanplaceholderlabel