aria-label 和 aria-labelledby 的区别答案

【问题标题】：Difference between aria-label and aria-labelledbyaria-label 和 aria-labelledby 的区别
【发布时间】：2013-11-06 04:02:42
【问题描述】：

我找到了两种使用aria- 属性标记区域的方法。

第一个：

<div class="main" role="main" aria-label="Search results">
    <a href="">Blah-blah</a>

第二个：

<div class="main" role="main" aria-labelledby="res1">
    <h2 id="res1" class="a11y">Search results</h2>
    <a href="">Blah-blah</a>

JAWS 对它们的读取完全相同。那么，有什么区别，你会选择什么？

【问题讨论】：

标签： javascript css screen-readers accessibility

【解决方案1】：

这个site给出了你回答的理由：-

理论上，如果文本是可视的，你应该使用 aria-labelledby 屏幕上的某个地方，这种形式更可取。你应该只使用当标签无法在屏幕上显示时使用 aria-label。

但是，在当前的支持下，您应该始终使用 aria-labelledby，即使您需要隐藏标签。虽然至少 JAWS 12 和 VoiceOver 都按预期读取了 aria-label，事实证明如果 aria-label 位于，VoiceOver 无法正确读取层次结构采用。例如：

<p id="group1">Outer group</p>
<p id="item1">First item</p>
<div role="group" aria-labelledby="group1">
<a href="javascript:" role="button" aria-labelledby="item1">Item Content</a>
</div>

这里的所有内容都使用 aria-labelledby，VoiceOver 会将按钮读取为“第一项外部组按钮”。换句话说，按钮标签，组标签，然后是对象的类型。

但是，如果您将任何元素更改为使用 aria-label，例如：

<p id="item1">First item</p>
<div role="group" aria-label="Outer group">
<a href="javascript:" role="button" aria-labelledby="item1">Item Content</a>
</div>

VoiceOver 现在会将按钮读取为简单的“第一项按钮”。哪个项目使用 aria-label 似乎并不重要，如果它在层次结构中的任何位置，则只会读出按钮本身的标签。

来自MDN:-

aria-labelledby 属性用于指示作为对象标签的元素。它用于建立一个小部件或组及其标签之间的关系。的用户屏幕阅读器等辅助技术通常用于导航通过在屏幕区域之间切换来翻页。如果标签不是与输入元素、小部件或组相关联，它不会被读取通过屏幕阅读器。

还有this:-

aria-label 属性用于定义标记当前元素。在文本标签不可见的情况下使用它屏幕。（如果有可见的文本标记元素，使用 aria-labelledby 代替。）

【讨论】：

这个答案描述了why to use one over the other，但没有给出任何关于它们之间主要区别的答案。
@ncubica 用法就是区别。否则是一样的。

【解决方案2】：

如果您使用 aria-label，屏幕阅读器会读出为 aria-label 指定的值。

<p>accessibility</p>   <button aria-label="test">Click Me</button>

屏幕阅读器输出：

可访问性按键测试

如果您已经在网页中有一些文本，您可以使用 aria-labelledby，您可以简单地将该特定元素的 id 作为值赋予另一个元素。

<p id="accessibilityLabel">accessibility</p>   <button aria-labelledby="accessibilityLabel">Click</button>

屏幕阅读器输出：

可访问性按钮可访问性

【讨论】：