label 标签必须通过 for 属性绑定 input 的 id，否则屏幕阅读器无法识别、点击失效；常见错误包括未配对 for/id、id 拼写错误、id 以数字开头、用 label 包裹 input、复选框/单选按钮未单独绑定 label、滥用 aria-labelledby 或 placeholder 替代 label，以及服务端报错后未同步更新 aria-invalid 和 aria-describedby。
label 标签必须用 for 属性绑定 input 的 id
不绑就等于没写 label，屏幕阅读器读不到，点击标签也无法聚焦输入框。常见错误是只写了 label 包裹 input，但没加 for 和 id 配对，或者拼错 ID 名（比如大小写不一致、多空格）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
input必须有唯一id，且值不能以数字开头（如id="1name"是无效的） -
label的for值必须和对应input的id完全一致（包括连字符、下划线） - 避免用
label包裹input的写法（<label><input></label>），它在部分旧版 Safari 和某些辅助技术中行为不稳定
type="checkbox" 和 type="radio" 要用多个 label 分开包
这类控件常成组出现，但每个选项必须有独立 label 绑定，否则只能选中第一个，或焦点跳转混乱。错误做法是只写一个 label 想“统管”所有复选框。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
input[type="checkbox"]或input[type="radio"]都配一个带for的label - 同一组
radio的name必须相同，但id必须不同——for绑的是id，不是name - 别为了省事用 JavaScript 模拟勾选逻辑来绕过
label绑定，这会让键盘 Tab 导航和无障碍支持直接失效
aria-labelledby 适合动态/复杂表单场景
当一个输入框需要关联多个描述文本（比如带单位、提示、错误信息的字段），或 label 无法包裹内容（如表格布局、模态框内嵌），aria-labelledby 是更灵活的选择。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
aria-labelledby的值是空格分隔的多个id，顺序即朗读顺序（如aria-labelledby="title-desc error-msg"） - 被引用的元素（如
<span id="title-desc">单位：kg</span>）不需要是label元素，但必须在 DOM 中存在且非display: none - 不要同时用
label和aria-labelledby指向同一输入框，会导致重复朗读；优先用原生label，仅在必要时降级到 ARIA
placeholder 不是 label 替代品
placeholder 文本在用户输入后就消失，无法提供持久可访问的字段说明，也不被大多数屏幕阅读器在默认模式下朗读。把它当标签用，等于把表单变成“盲填”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 哪怕 UI 设计要求“无标签占位”，也要用 CSS 隐藏原生
label（如position: absolute; clip: rect(0 0 0 0)），保留其语义和绑定 -
placeholder只用于补充提示（如“示例：john@example.com”），不能承载必填、格式、含义等关键信息 - 如果用了
aria-label来补 label 缺失，要确保它内容准确、简洁，且不和placeholder重复（比如都写“邮箱地址”）
最易被忽略的一点：表单提交后服务端返回错误时，很多人只改了 DOM 文本，却忘了同步更新 aria-invalid 和 aria-describedby 指向的错误节点——这对键盘用户和读屏用户来说，错误提示等于不存在。
