label标签for属性关联id与aria-labelledby的用法差异及适用场景

两种写法的核心差异 #

第一种是HTML原生的表单标签关联机制，基于for和对应输入框的id实现，浏览器原生支持完整能力：

• 普通用户点击label即可触发输入框聚焦/激活，交互体验更友好
• 无障碍工具可正常识别两者关联，符合无障碍规范

第二种是基于ARIA属性的语义补充机制，仅作用于无障碍识别层面：

• 仅屏幕阅读器等无障碍工具能识别两者的关联，普通用户点击label不会触发输入框的任何交互
• 本质是为了弥补原生HTML能力无法覆盖的场景而生的补充方案

适用场景 #

• 原生for绑定写法：是常规表单场景的首选方案，无特殊情况都应该优先用这种写法，同时覆盖普通用户交互和无障碍适配需求。
• aria-labelledby绑定写法：仅用于原生label绑定无法实现的特殊场景，常见场景包括：
  • 输入框的关联标签不在同一DOM层级，无法通过原生for属性绑定
  • 单个输入框需要关联多个描述文本
  • 自定义非原生表单组件，无法使用原生label做绑定

关于功能子集和冗余写法的疑问 #

1. 第二种写法确实是第一种的功能子集，仅覆盖了无障碍语义识别的能力，缺失了原生绑定的交互能力，按照无障碍开发的优先级原则，原生HTML能力的优先级永远高于ARIA补充方案。
2. 同时使用两种绑定属于冗余写法，不推荐，但不属于完全无效的错误写法：
   原生for绑定已经会自动将label文本作为输入框的无障碍名称，额外加aria-labelledby不会带来任何收益，只会增加代码冗余。
   额外注意：如果aria-labelledby指向的内容和原生label文本不一致，aria-labelledby的优先级会更高，屏幕阅读器会优先读取aria-labelledby指向的内容，反而可能导致语义不一致的问题。

内容的提问来源于stack exchange，提问作者jwkoo