ARIA: separator 角色

描述

分隔符是用于分隔和区分内容部分或菜单项组的分割线。分隔符有两种类型：一种是提供可见边界的静态结构，与 HTML <hr> 元素相同，另一种是可聚焦、可移动的控件。

具有 separator 角色的元素具有隐式的 aria-orientation 值 horizontal。

不可聚焦的分隔符

不可聚焦的分隔符是一种静态结构元素，可用于在菜单中视觉上分隔两组菜单项，或在页面两个部分之间提供水平线。对于不依赖于焦点而是使用阅读光标的屏幕阅读器用户来说，不可聚焦的主题分隔符仍然是可感知的。

<h2>My first blog post</h2>
…
<img src="blueline.gif" role="separator" alt="" />
<h2>Two years later, my second post</h2>
…

在示例中，一个图片在两篇博客文章之间创建了一个视觉分隔符。作者本来可以使用语义主题分隔符 <hr> 元素并使用 CSS 设置其为蓝色（而无需在更改博客主题时更改图片），或者作者可以将每篇文章包含在语义 <article> 元素中，或者两者都使用。

<section role="feed">
  <article>
    <h2>My first blog post</h2>
    …
  </article>
  <hr />
  <article>
    <h2>Two years later, my second post</h2>
    …
  </article>
</section>

[role="feed"] > hr {
  height: 3px;
  background-color: blue;
}

不需要可访问名称。

可聚焦的分隔符

separator 角色可用于标识元素作为菜单中项目组之间的视觉分隔符，例如 menuitemradio 或 menuitemcheckbox 元素的组。

如果分隔符是可聚焦的，它提供了两个内容部分之间的可见边界，并允许用户通过更改其位置来更改它所分隔的相对部分的大小，那么 aria-valuenow 的值必须设置为反映分隔符当前位置的数字，并且当其值更改时必须更新。如果 aria-valuemin 和 aria-valuemax 未分别设置为默认值 0 和 100，则也应包含它们。

如果存在多个可聚焦分隔符，则应包含可访问名称，并使用 aria-label。

所有后代都是展示性的

有些用户界面组件，在平台辅助功能 API 中表示时，只能包含文本。辅助功能 API 无法表示 separator 中包含的语义元素。为了解决此限制，浏览器会自动将 presentation 角色应用于任何 separator 元素的后代元素，因为 presentation 角色不支持语义子元素。

例如，考虑以下包含标题的 separator 元素。

<div role="separator"><h3>Title of my separator</h3></div>

由于 separator 的后代元素是呈现性的，因此以下代码是等效的：

<div role="separator"><h3 role="presentation">Title of my separator</h3></div>

从辅助技术用户的角度来看，标题不存在，因为前面的代码片段在辅助功能树中等同于以下内容：

<div role="separator">Title of my separator</div>

关联的 WAI-ARIA 角色、状态和属性

aria-orientation（separator 的默认值为 horizontal）

默认情况下，separator 角色的分隔符假定为水平的。可以包含此值并将其设置为 horizontal、undefined（其他角色的默认值，除非另有规定）或 vertical。

aria-valuenow

如果分隔符可聚焦且有已知值，则 aria-valuenow 定义当前值。如果不可聚焦或值未知，则不包含此属性。

aria-valuemin（默认值为 0）

如果分隔符可聚焦，且最小值不是 0，则使用 aria-valuemin 包含最小值。如果

aria-valuemax（默认值为 100）

如果分隔符可聚焦，且最大值不是 100，则使用 aria-valuemax 包含该值，其值应等于或大于 aria-valuemin。

aria-valuetext

如果分隔符可聚焦，并且 aria-valuenow 不能为用户提供可用的信息，则会读取 aria-valuetext 的内容而不是 aria-valuenow 的值。

规范

另见

• 主题分隔符 HTML <hr> 元素
• 菜单栏中的分隔符示例