ARIA 标签和关系

使用 ARIA 标签创建无障碍元素说明

爱丽丝·博克斯霍尔
Alice Boxhall
戴夫·加什
Dave Gash
梅金·卡尼
Meggin Kearney

标签

ARIA 提供了多种为元素添加标签和说明的机制。事实上,ARIA 是添加无障碍帮助或说明文本的唯一方式。我们来看一下 ARIA 用于创建可访问标签的属性。

aria 标签

aria-label 允许我们指定一个用作无障碍标签的字符串。这会替换任何其他原生标签机制,例如 label 元素。例如,如果 button 同时包含文本内容和 aria-label,则仅使用 aria-label 值。

如果您有某种元素用途的可视指示(例如使用图形而非文字的按钮),但仍需要为无法访问视觉指示的任何人阐明该用途(例如仅使用图片来表明其用途的按钮),则可以使用 aria-label 属性。

使用 aria-label 标识一个仅包含图片的按钮。

aria-labelledby

aria-labelledby 允许我们将 DOM 中另一个元素的 ID 指定为元素的标签。

使用 aria-labelledby 标识单选组。

这与使用 label 元素非常相似,但也存在一些关键区别。

  1. aria-labelledby 可以用于任何元素,而不仅仅是可加标签的元素。
  2. 虽然 label 元素引用它标记的内容,但对于 aria-labelledby 来说,关系是相反的 - 被加标签的对象是指标记它的内容。
  3. 一个可加标签的元素只能与一个标签元素相关联,但 aria-labelledby 可以接受 IDREF 列表以根据多个元素构成一个标签。标签将按照 IDREF 的提供顺序串联。
  4. 您可以使用 aria-labelledby 引用隐藏且不在无障碍功能树中的元素。例如,您可以在要加标签的元素旁边添加一个隐藏的 span,然后使用 aria-labelledby 引用该元素。
  5. 不过,由于 ARIA 仅影响无障碍功能树,因此 aria-labelledby 不会提供您使用 label 元素获得的熟悉的标签点击行为。

重要的是,aria-labelledby 会替换元素的所有其他名称源。例如,如果某个元素同时具有 aria-labelledbyaria-label,或同时具有 aria-labelledby 和原生 HTML label,则 aria-labelledby 标签始终优先。

婚姻状况

aria-labelledby关系属性的一个示例。无论页面元素之间的 DOM 关系如何,关系属性都会在它们之间创建语义关系。对于 aria-labelledby,关系为“此元素由相应元素标记”。

ARIA 规范列出了八个关系属性。其中的六个(aria-activedescendantaria-controlsaria-describedbyaria-labelledbyaria-owns)会引用一个或多个元素,以在页面上的元素之间建立新链接。每种情况的区别在于链接的含义及其呈现给用户的方式。

aria-owns

aria-owns 是使用最广泛的 ARIA 关系之一。通过此属性,我们可以告知辅助技术,将 DOM 中的单独元素视为当前元素的子元素,或者将现有子元素重新排列为不同的顺序。例如,如果弹出式子菜单在视觉上位于其父菜单附近,但不能是其父项的 DOM 子项(因为这会影响视觉呈现),您可以使用 aria-owns 将该子菜单作为父菜单的子项呈现给屏幕阅读器。

使用 aria-owns 在菜单和子菜单之间建立关系。

aria-activedescendant

aria-activedescendant 发挥着相关作用。就像页面的活动元素是具有焦点的元素一样,设置元素的有效后代元素可让我们告知辅助技术,当某个元素的父级实际上具有焦点时,应作为焦点元素呈现给用户。例如,在列表框中,您可能希望将页面焦点置于列表框容器上,但将其 aria-activedescendant 属性更新为当前选定的列表项。这会让当前选定项向辅助技术显示,就像它是获得焦点的项一样。

使用 aria-activedescendant 在列表框中建立关系。

咏叹调描述者

aria-describedby 提供可访问的说明,方式与 aria-labelledby 提供标签的方式相同。与 aria-labelledby 一样,aria-describedby 可以引用其他不可见的元素,无论这些元素在 DOM 中隐藏,还是对辅助技术用户隐藏。如果存在用户可能需要的额外说明文字(无论是仅适用于使用辅助技术的用户还是适用于所有用户),此方法将非常有用。

一个常见的示例是密码输入字段,它附带一些说明最低密码要求的描述性文本。与标签不同,此说明不一定会显示给用户;用户可以选择是否访问此说明,也可能显示在其他所有信息之后,或者可能会被其他内容预先占用。例如,如果用户正在输入信息,他们的输入将回显,并且可能会中断元素的说明。因此,说明是传达补充但不是必要信息的绝佳方式;它不会妨碍更关键的信息,例如元素角色。

使用 aria-describedby 与密码字段建立关系。

aria-posinset 和 aria-setsize

其余关系属性略有不同,并搭配使用。 aria-posinset(“在集中的位置”)和 aria-setsize(“集的大小”)用于定义集(例如列表)中的同级元素之间的关系。

当 DOM 中存在的元素无法确定集的大小时(例如,当使用延迟渲染避免在 DOM 中一次性查看所有大型列表时),aria-setsize 可以指定实际集的大小,aria-posinset 可以指定元素在集中的位置。例如,在一个可能包含 1,000 个元素的集合中,您可以将某个元素的 aria-posinset 设为 857(即使该元素在 DOM 中最先出现),然后使用动态 HTML 技术确保用户可以按需浏览完整列表。

使用 aria-posinset 和 aria-setsize 在列表中建立关系。