aria标签和aria标签之间的区别 [英] Difference between aria-label and aria-labelledby

问题描述

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

I found 2 ways of marking a zone with aria- attributes.

第一个：

<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读取它们的方式完全相同。那么，有什么区别，您会选择什么？

JAWS reads them absolutely the same. So, what is the difference and what would you choose?

推荐答案

此 网站 给出了答案的原因：-

This site gives the reason for your answer:-

理论上，如果文本在屏幕上某处在视觉上是
，则应使用aria-labeledby，并且这种形式是可取的。您只能在无法在屏幕上看到标签的情况下使用
aria-label。

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

However, with current support, you should always use aria-labelledby, even if you need the label to be hidden. While at least JAWS 12 and VoiceOver both read the aria-label as expected, it turns out that VoiceOver doesn’t correctly read the hierarchy if aria-label is in use. For example:

<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会将按钮读取为第一项外组按钮 。换句话说，是按钮标签，组标签，然后是对象的类型。

everything here is using aria-labelledby and VoiceOver will read the button as "First item Outer group button". In other words, the button label, the group label and then the type of object.

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

However, if you change any of the elements to use aria-label, for example:

<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似乎无关紧要，如果它在层次结构中的任何位置，则仅会读出按钮本身的标签。

VoiceOver will now read the button as simple "First item button". It doesn’t seem to matter which item uses aria-label, if it’s anywhere in the hierarchy, only the label for the button itself will be read out.

MDN ：-

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

The aria-labelledby attribute is used to indicate the IDs of the elements that are the labels for the object. It is used to establish a relationship between widgets or groups and their labels. Users of assistive technologies such as screen readers typically navigate a page by tabbing between areas of the screen. If a label is not associated with an input element, widget or group, it will not be read by a screen reader.

和此： -

aria-label 属性用于定义标记
当前元素的字符串。如果在
屏幕上看不到文本标签，请使用它。 （如果标签上有可见的文本标签，请改用
aria-labelledby。）

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. (If there is visible text labeling the element, use aria-labelledby instead.)

这篇关于aria标签和aria标签之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！