javascript aria-label 和 aria-labelledby 的区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19616893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between aria-label and aria-labelledby
提问by Varvara Stepanova
I found 2 ways of marking a zone with aria-attributes.
我找到了两种用aria-属性标记区域的方法。
First one:
第一：
<div class="main" role="main" aria-label="Search results">
<a href="">Blah-blah</a>
Second one:
第二个：
<div class="main" role="main" aria-labelledby="res1">
<h2 id="res1" class="a11y">Search results</h2>
<a href="">Blah-blah</a>
JAWS reads them absolutely the same. So, what is the difference and what would you choose?
JAWS 对它们的读法完全相同。那么，有什么区别，你会选择什么？
回答by Rahul Tripathi
This sitegives the reason for your answer:-
该网站给出了您回答的原因：-
In theory, you should use aria-labelledby if the text is visually on-screen somewhere and this form is preferable. You should only use aria-label when it's not possible to have the label visible on screen.
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:
从理论上讲，如果文本在屏幕上的某个地方可见并且这种形式更可取，则您应该使用 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>
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-labelledby，VoiceOver 会将按钮读作“第一项外组按钮”。换句话说，按钮标签，组标签，然后是对象的类型。
However, if you change any of the elements to use aria-label, for example:
但是，如果您将任何元素更改为使用 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 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.
VoiceOver 现在会将按钮读作简单的“第一项按钮”。哪个项目使用 aria-label 似乎无关紧要，如果它在层次结构中的任何位置，则只会读出按钮本身的标签。
From the MDN:-
来自MDN：-
The aria-labelledbyattribute 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.
的咏叹调-labelledby属性用于指示是该对象的标签的元素的ID。它用于在小部件或组与其标签之间建立关系。屏幕阅读器等辅助技术的用户通常通过在屏幕区域之间切换来导航页面。如果标签未与输入元素、小部件或组关联，则屏幕阅读器将无法读取该标签。
And this:-
而这个：-
The aria-labelattribute 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-labelledby。）
