41

我发现了两种用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 对它们的读取完全相同。那么，有什么区别，你会选择什么？

4

2 回答 2

45

该网站给出了您回答的原因：-

理论上，如果文本在屏幕上的某处可视化并且这种形式更可取，则应该使用 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属性用于指示作为对象标签的元素的 ID 。它用于在小部件或组及其标签之间建立关系。屏幕阅读器等辅助技术的用户通常通过在屏幕区域之间切换来导航页面。如果标签不与输入元素、小部件或组关联，则屏幕阅读器不会读取它。

这： -

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

于 2013-10-27T10:14:11.987 回答
1

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

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

屏幕阅读器输出：

可访问性按钮测试

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

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

屏幕阅读器输出：

可访问性按钮可访问性

于 2022-01-12T10:29:06.270 回答