aria-label和aria-labelledby之间的区别

Question

我找到了两种用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完全一样地读它们.那么,有什么区别,你会选择什么？

Answer 1

这个网站给出了你答案的理由: -

理论上,你应该使用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将按钮读作"First item Outer group button".换句话说,按钮标签,组标签,然后是对象的类型.

但是,如果您更改任何元素以使用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: -

的咏叹调-labelledby属性用于指示是该对象的标签的元素的ID.它用于建立小部件或组及其标签之间的关系.诸如屏幕阅读器之类的辅助技术的用户通常通过在屏幕的区域之间进行标签来导航页面.如果标签未与输入元素,窗口小部件或组关联,则屏幕阅读器将不会读取该标签.

与此: -

的咏叹调标签属性用来定义标签的当前元素的字符串.在屏幕上看不到文本标签的情况下使用它.(如果有可见文本标记元素,请使用aria-labelledby.)