使用 ARIA 标签创建无障碍元素说明
标签
ARIA 提供了多种为元素添加标签和说明的机制。事实上,ARIA 是添加无障碍帮助或说明文本的唯一方式。我们来看一下 ARIA 用于创建可访问标签的属性。
aria 标签
aria-label
允许我们指定一个用作无障碍标签的字符串。这会替换任何其他原生标签机制,例如 label
元素。例如,如果 button
同时包含文本内容和 aria-label
,则仅使用 aria-label
值。
如果您有某种元素用途的可视指示(例如使用图形而非文字的按钮),但仍需要为无法访问视觉指示的任何人阐明该用途(例如仅使用图片来表明其用途的按钮),则可以使用 aria-label
属性。
aria-labelledby
aria-labelledby
允许我们将 DOM 中另一个元素的 ID 指定为元素的标签。
这与使用 label
元素非常相似,但也存在一些关键区别。
aria-labelledby
可以用于任何元素,而不仅仅是可加标签的元素。- 虽然
label
元素引用它标记的内容,但对于aria-labelledby
来说,关系是相反的 - 被加标签的对象是指标记它的内容。 - 一个可加标签的元素只能与一个标签元素相关联,但
aria-labelledby
可以接受 IDREF 列表以根据多个元素构成一个标签。标签将按照 IDREF 的提供顺序串联。 - 您可以使用
aria-labelledby
引用隐藏且不在无障碍功能树中的元素。例如,您可以在要加标签的元素旁边添加一个隐藏的span
,然后使用aria-labelledby
引用该元素。 - 不过,由于 ARIA 仅影响无障碍功能树,因此
aria-labelledby
不会提供您使用label
元素获得的熟悉的标签点击行为。
重要的是,aria-labelledby
会替换元素的所有其他名称源。例如,如果某个元素同时具有 aria-labelledby
和 aria-label
,或同时具有 aria-labelledby
和原生 HTML label
,则 aria-labelledby
标签始终优先。
婚姻状况
aria-labelledby
是关系属性的一个示例。无论页面元素之间的 DOM 关系如何,关系属性都会在它们之间创建语义关系。对于 aria-labelledby
,关系为“此元素由相应元素标记”。
ARIA 规范列出了八个关系属性。其中的六个(aria-activedescendant
、aria-controls
、aria-describedby
、aria-labelledby
和 aria-owns
)会引用一个或多个元素,以在页面上的元素之间建立新链接。每种情况的区别在于链接的含义及其呈现给用户的方式。
aria-owns
aria-owns
是使用最广泛的 ARIA 关系之一。通过此属性,我们可以告知辅助技术,将 DOM 中的单独元素视为当前元素的子元素,或者将现有子元素重新排列为不同的顺序。例如,如果弹出式子菜单在视觉上位于其父菜单附近,但不能是其父项的 DOM 子项(因为这会影响视觉呈现),您可以使用 aria-owns
将该子菜单作为父菜单的子项呈现给屏幕阅读器。
aria-activedescendant
aria-activedescendant
发挥着相关作用。就像页面的活动元素是具有焦点的元素一样,设置元素的有效后代元素可让我们告知辅助技术,当某个元素的父级实际上具有焦点时,应作为焦点元素呈现给用户。例如,在列表框中,您可能希望将页面焦点置于列表框容器上,但将其 aria-activedescendant
属性更新为当前选定的列表项。这会让当前选定项向辅助技术显示,就像它是获得焦点的项一样。
咏叹调描述者
aria-describedby
提供可访问的说明,方式与 aria-labelledby
提供标签的方式相同。与 aria-labelledby
一样,aria-describedby
可以引用其他不可见的元素,无论这些元素在 DOM 中隐藏,还是对辅助技术用户隐藏。如果存在用户可能需要的额外说明文字(无论是仅适用于使用辅助技术的用户还是适用于所有用户),此方法将非常有用。
一个常见的示例是密码输入字段,它附带一些说明最低密码要求的描述性文本。与标签不同,此说明不一定会显示给用户;用户可以选择是否访问此说明,也可能显示在其他所有信息之后,或者可能会被其他内容预先占用。例如,如果用户正在输入信息,他们的输入将回显,并且可能会中断元素的说明。因此,说明是传达补充但不是必要信息的绝佳方式;它不会妨碍更关键的信息,例如元素角色。
aria-posinset 和 aria-setsize
其余关系属性略有不同,并搭配使用。
aria-posinset
(“在集中的位置”)和 aria-setsize
(“集的大小”)用于定义集(例如列表)中的同级元素之间的关系。
当 DOM 中存在的元素无法确定集的大小时(例如,当使用延迟渲染避免在 DOM 中一次性查看所有大型列表时),aria-setsize
可以指定实际集的大小,aria-posinset
可以指定元素在集中的位置。例如,在一个可能包含 1,000 个元素的集合中,您可以将某个元素的 aria-posinset
设为 857(即使该元素在 DOM 中最先出现),然后使用动态 HTML 技术确保用户可以按需浏览完整列表。