label绑定input仅两种有效方式：显式用for/id严格匹配，或隐式将input直接嵌套于label内；placeholder、title等不能替代label，因读屏器和键盘用户无法感知其语义。
表单元素必须有可访问的描述性标签，不能靠 placeholder、title 或视觉位置“暗示”含义——读屏器和键盘用户根本感知不到。
label 标签怎么绑定 input 才有效
两种方式都合法，但行为和适用场景不同：
- 显式绑定：用
for属性指向input的id，要求id唯一且拼写完全一致（大小写敏感），比如<label for="email">邮箱地址</label><input id="email" type="email"> - 隐式包裹：直接把
input写在label里，不需要id或for，比如<label>同意条款<input type="checkbox" name="agree"></label>；对复选框/单选按钮更自然，也避免 ID 冲突风险 - 别混用：如果用了
<label for="x"></label>，就不要同时给input加aria-label，读屏器可能重复播报
为什么 placeholder 不是描述文字
placeholder 是临时提示，不是语义化标签：
- 焦点进入时消失，键盘用户或读屏器无法持续获取上下文
- WCAG 明确不认可它作为替代
label的方案 - 提交验证失败时，placeholder 不会回填，用户容易忘记字段用途
- 正确做法：始终配
label，placeholder仅作辅助（如“example@domain.com”）
aria-label 和 aria-labelledby 什么时候用
只在无法用 label 的场景下补位：
-
aria-label适合纯图标按钮，比如<button aria-label="删除此项"><svg>...</svg></button>；值必须简洁、准确，不能是“点击这里”这种废话 -
aria-labelledby适合复用已有文本，比如图表旁有<h3 id="sales-chart">2024 销售趋势</h3>，则<canvas aria-labelledby="sales-chart"></canvas> - 绝对不要在已有
label的input上再加aria-label，会导致重复朗读 -
title属性基本无效——鼠标不悬停就不显示，键盘和读屏器几乎忽略它
最容易被忽略的是：label 必须真实存在、可聚焦、与控件一一对应；哪怕样式上“看不见”，也不能用 display: none 或 visibility: hidden 隐藏它——要用 clip-path 或负 margin 移出视口，否则读屏器就读不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
