HTML 中的 ARIA 标签：元素内部还是外部？”

Question

我正在努力提高网站的可访问性，并且对 HTML 中

ARIA

标签的放置有疑问。当使用

ARIA

或

aria-label

等

aria-labelledby

属性时，将它们放置在它们所标记的元素内部还是外部是否被认为是最佳实践？例如，以下哪一个是推荐的方法：

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

或

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

谢谢

Answer 1

正确答案是你的第二个例子。 第一个不行。

属性 aria-label 必须放在您要标记的元素上。将其放入另一个元素中没有效果。 仅当元素是交互式且可聚焦的，或者已分配了明确的角色时，使用 aria-label 标记元素才有效。这是输入字段和链接的情况，但正常情况下不是

<div>

。

属性 aria-labelledby 的作用与 aria-label 相同，只不过它引用另一个包含标签的元素，而不是直接给出标签。它也有同样的局限性。

为了与原生

<label>

的工作方式相似，最好将标签元素放置在标签元素之前或之后，但不要作为父元素。换句话说：

<label for="X">...</label>
<input id="X"/>

效果优于：

<label>...
<input/>
</label>

同样如此，

<div id="X">...</div>
<input aria-labelledby="X"/>

效果优于：

<div id="X">...
<input aria-labelledby="X"/>
</div>

在后一种情况下，标签可能会被读取两次。

如果您有可能这样做，那么使用真正的

<label>

元素而不是 aria-label 或 aria-labelledby 属性会更好。 ARIA 的第一条规则是，如果您可以通过其他方式更简单地实现它，则不应使用 ARIA，在这种情况下，使用本机

<label>

是不使用 ARIA 的一个非常简单的解决方案。仅当

<label>

不太实用时才应使用属性 aria-label 和 aria-labelledby。

请记住，

<label>

免费提供奖励功能，可以单击它来聚焦其所附加的元素。它可能对您来说有点无用，但实际上对于视力不佳的人或手部动作不精确的人来说非常重要。