ARIA 标签和关系
作者：Meggin Kearney、Dave Gash、Alice Boxhall
标签
ARIA 提供了多种向元素添加标签和说明的机制。事实上，ARIA 是唯一一种可以添加可访问帮助或说明文本的方式。 我们来看一下 ARIA 用于创建可访问标签的属性。
aria-label
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和原生 HTMLlabel，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-describedby提供了一种可访问说明，方式与aria-labelledby提供标签的方式相同。 与aria-labelledby一样，aria-describedby可能引用不可见的元素，无论这些元素在 DOM 中隐藏，还是对辅助技术用户隐藏。如果存在用户可能需要的额外说明性文本，则不管该文本适用于辅助技术用户还是所有用户，这种技术都非常有用。
一个常见的示例是密码输入字段带有一些说明性文本，其中，说明性文本用于说明最低密码要求。 与标签不同，此说明不一定会呈现给用户；用户可以选择是否访问说明，此说明可能跟在其他信息之后，也可能被其他内容抢占。例如，如果用户正在输入信息，他们的输入将回显并且可能中断元素的说明。因此，说明是一种用于传达补充但非必要信息的绝佳方式；它不会妨碍更关键的信息，例如元素角色。
aria-posinset 和 aria-setsize
其余的关系属性略有不同并协同作用。aria-posinset（“在集中的位置”）和aria-setsize（“集大小”）用于定义集（例如，列表）中同级元素之间的关系。
如果无法通过 DOM 中存在的元素确定集的大小（例如，使用延迟渲染避免在 DOM 中生成大的列表时），aria-setsize可以指定实际集大小，aria-posinset可以指定元素在集中的位置。例如，在一个可能包含 1000 个元素的集中，您可以指定特定元素的aria-posinset为 857（即使其在 DOM 中位于首位），然后使用动态 HTML 技术确保用户可以根据需要查看完整列表。
