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

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会将按钮读作“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现在将按钮读取为简单的“第一项按钮”。使用咏叹调标签的项目似乎并不重要，如果它在层次结构中的任何位置，则只会读出按钮本身的标签。

来自MDN： -

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

this： -

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

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

1 个答案: