HTML中ARIA标签的最佳放置位置：内部还是外部？

结论很明确：必须将aria-label或aria-labelledby直接添加到需要被标记的交互元素本身上，你提供的第二种写法才是符合可访问性规范的正确方案。

为什么容器加标签没用？ #

普通的<div>这类容器元素默认没有语义，也不属于交互元素，屏幕阅读器不会主动读取它的aria-label，更不会将这个标签关联到内部的子元素（比如你的<input>）。当用户聚焦到第一种写法里的输入框时，屏幕阅读器只会提示“无标签的文本输入框”，完全达不到你想要的可访问性优化效果。

正确写法示例 #

<div class="container">
  <input type="text" aria-label="testing" />
</div>

当用户聚焦这个输入框时，屏幕阅读器会清晰读出“testing，文本输入框”，辅助技术能正确识别控件的用途。

额外的可访问性建议 #

1. 优先使用原生<label>：只要场景允许，用原生标签关联表单控件是比ARIA更可靠的方案，比如：

<div class="container">
  <label for="test-input">testing</label>
  <input type="text" id="test-input" />
</div>

2. 容器标签的正确用法：如果要给一组控件加描述，需要给容器添加role="group"或role="region"，再配合aria-label，但这是用来描述整个组的用途，不是替代单个控件的标签：

<div class="container" role="group" aria-label="用户基本信息">
  <label for="username">用户名</label>
  <input type="text" id="username" />
  <label for="phone">手机号</label>
  <input type="tel" id="phone" />
</div>

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