ARIA：分隔符角色

分隔符是用于分隔和区分内容部分或菜单项组的分割线。分隔符有两种类型：提供可见边界的静态结构，与 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;
}

不需要可访问名称。

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

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

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

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

例如，请考虑以下包含标题的 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>

aria-orientation（分隔符的默认值为水平）

默认情况下，separator 角色的分割线假定为水平。该值可以包含并设置为水平、未定义（除非另有指定，否则其他角色的默认值）或垂直。

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> 元素
• 菜单栏中的示例分隔符