aria标签和aria标签的区别

作者

我找到了两种使用aria-属性标记区域的方法

第一个：

&lt；div class=“main”role=“main”aria label=“搜索结果”&gt；
&lt；a href=“”&gt；诸如此类&lt/a&gt；

第二个：

&lt；div class=“main”role=“main”aria labelledby=“res1”&gt；
&lt；h2 id=“res1”class=“a11y”&gt；搜索结果&lt/h2&gt；
&lt；a href=“”&gt；诸如此类&lt/a&gt；

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

此网站提供了您回答问题的原因：-

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

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

&lt；p id=“group1”&gt；外部组&lt/p&gt；
&lt；p id=“item1”&gt；第一项&lt/p&gt；
&lt；div role=“group”aria labelledby=“group1”&gt；
&lt；a href=“javascript:”role=“button”aria labelledby=“item1”&gt；项目内容&lt/a&gt；
&lt/部门&gt；

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

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

&lt；p id=“item1”&gt；第一项&lt/p&gt；
&lt；div role=“group”aria label=“外部组”&gt；
&lt；a href=“javascript:”role=“button”aria labelledby=“item1”&gt；项目内容&lt/a&gt；
&lt/部门&gt；

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

从MDN：-

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

这是：-

aria label属性用于定义标记
当前元素。在屏幕上看不到文本标签的情况下使用
屏幕。（如果存在标记元素的可见文本，请使用
（取而代之的是Labelledbaria。）

相关文章：

  1. 如何使浮动元素居中？
  2. 用于Firefox的自定义CSS滚动条
  3. 大纲对文本的影响
  4. 如何调整单个flexbox项（覆盖调整内容）[重复]

发表评论

© 2026 开发百科-程序代码问答平台 • Built with