占位符不能替代label，因其缺乏语义关联、不被读屏器稳定支持且无法绑定校验状态；必须使用显式label绑定（for/id）或aria-labelledby/aria-label，并确保错误提示通过aria-invalid和aria-describedby正确关联。
占位符（placeholder）不是标签，也不能替代 label——这是绝大多数表单可访问性问题的起点。只要还在用 placeholder 当作字段说明，屏幕阅读器就大概率只报“编辑框”，用户根本不知道该填什么。
为什么 placeholder 不能当 label 用
视觉上它看起来像提示，但实际行为完全不符合辅助技术预期：输入开始后文字消失，读屏器无法持续播报上下文；它不触发点击聚焦（点 placeholder 不会让 input 获得焦点）；部分读屏器压根不读 placeholder 属性；更关键的是，它不具备语义关联能力，无法绑定校验状态或错误反馈。
-
placeholder是纯装饰性文本，浏览器不将其纳入 ARIA 标签计算逻辑 - 移动端 iOS VoiceOver 默认不读
placeholder，Android TalkBack 支持也不稳定 - WCAG 2.1 明确要求：所有表单控件必须有可编程关联的标签（即
label或等效 ARIA 属性）
label 没包住 input 时怎么安全补救
常见写法如 <label>邮箱</label><input id="email"> 或 <label>邮箱<input id="email"></label> 都不可靠——前者无关联，后者一旦内部有换行、注释或 JS 动态插入内容，DOM 结构极易断裂，导致 label 失效。
- 首选显式绑定：
<label for="email">邮箱地址</label><input id="email" name="email">，确保for和id完全一致（大小写、空格、连字符都不能错） - 若 label 文本已可见（比如图标旁有“密码”二字），用
aria-labelledby="id-of-text"关联已有文本，避免重复描述 - 仅限极简场景（如搜索框图标旁无文字）才用
aria-label，且必须保证该描述能准确传达功能，例如<input type="search" aria-label="站内搜索">
错误提示和 placeholder 共存时的典型陷阱
很多开发者把 placeholder 留着当“默认提示”，再叠加上错误文案，结果屏幕阅读器在出错时既读不到 label，也读不到错误信息——因为 aria-describedby 指向的错误容器被 placeholder 的存在干扰了焦点流，或者错误文案本身没正确挂载。
- 出错时必须设
aria-invalid="true"，且同步设置aria-describedby="error-email"，ID 必须唯一且指向真实存在的元素 - 错误容器不能用
display: none隐藏，否则读屏器直接跳过；应改用visibility: hidden+aria-hidden="true"，校验通过后再移除这两个属性 - 绝对不要让
placeholder和错误提示共用同一视觉区域——它们语义冲突，且会互相覆盖焦点播报优先级
真正剔除占位符依赖，不是删掉 placeholder 属性就完事；而是把每个字段的“用途”明确锚定在 label 或等效 ARIA 属性上，并确保这个锚点在输入、校验、错误、恢复全流程中始终有效。最容易被忽略的，是 label 和 input 的 ID 关联一旦出错，整个链路就断了——而这种错误在视觉上完全看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
