Javascript aria标签和aria标签的区别

我找到了两种使用

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>

搜索结果

大白鲨读起来完全一样。那么，区别是什么？您会选择什么？

这给出了您回答的原因：-

理论上，如果文本是可视的，那么应该使用aria labelledby 屏幕上的某个地方，最好使用此表单。你应该只使用 无法在屏幕上显示标签时使用aria标签。

但是，在当前的支持下，您应该始终使用aria labelledby， 即使您需要隐藏标签。而至少12和 VoiceOver两人都像预期的那样阅读了aria标签，结果是 如果aria标签在中，VoiceOver无法正确读取层次结构 使用。例如：

<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>

外部组

第一项

这里的一切都使用了aria labelledby，画外音将把按钮读作“第一项外部组按钮”。换句话说，按钮标签、组标签，然后是对象的类型

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

<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>

第一项

画外音现在将该按钮解读为简单的“第一项按钮”。哪个项目使用aria标签似乎无关紧要，如果它在层次结构中的任何位置，则只会读取按钮本身的标签

从：-

aria labelledby属性用于指示 作为对象标签的元素。它用于建立一个 小部件或组与其标签之间的关系。用户 诸如屏幕阅读器之类的辅助技术通常在屏幕上导航 通过在屏幕区域之间的选项卡进行分页。如果标签不可用 与输入元素、小部件或组相关联，它将不会被读取 通过屏幕阅读器

以及：-

aria label属性用于定义标记 当前元素。在屏幕上看不到文本标签的情况下使用 屏幕。（如果存在标记元素的可见文本，请使用 阿丽亚被贴上了标签。）

---

这个答案描述了为什么要使用一个而不是另一个，但是不要回答它们之间的主要区别。@ncubica用法就是区别。否则也一样。