我正在努力提高我的网站的可访问性，并有一个关于ARIA个标签在HTML中的放置的问题.当使用像aria-label或aria-labelledby这样的ARIA个属性时，将它们放在它们所标记的元素内还是放在元素外被认为是最佳实践？例如，以下哪一项是推荐的方法:
<div class="container" aria-label="testing">
<input type="text" />
</div>
或
<div class="container">
<input type="text" aria-label="testing" />
</div>
谢谢
正确答案是你的第二个例子. 第一个是行不通的.
属性aria-Label必须放在您要标记的元素上.将其放入另一个元素中不会产生任何效果.
使用aria-Label标记元素只有在元素是交互的和可聚焦的，或者如果它被分配了明确的角色时才起作用.这是输入字段和链接的情况，但在正常情况下不是<div>.
属性aria-Labelledby的工作原理与aria-Label相同，只是它引用的是包含标签的另一个元素，而不是直接给出标签.它也有同样的局限性.
为了与Native <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-Labeldby属性.
ARIA的第一条规则是，如果您可以用另一种更简单的方法来做这件事，那么就不应该使用ARIA，在这种情况下，使用原生<label>是不使用ARIA的一个非常简单的解决方案.只有在不太实际的情况下，才应该使用aria-bel和aria-Labeldby属性.
记住，<label>会免费提供一个奖励功能，可以点击它来聚焦它所附的元素.它对你可能看起来有点无用，但实际上对部分视力的人，或者那些手部动作不准确的人来说，它是极其重要的，例如.