separator

使用时机

在段落文本的主题分隔处，使用 <hr>。屏幕阅读器会将原生元素识别并播报为分隔符。

在非 <hr> 元素上使用 role="separator" 适用于复合组件内部：

• 在 role="menu" 或 role="menubar" 内部，用于分隔菜单项分组。
• 在 role="toolbar" 内部，用于分隔控件分组。
• 在分栏布局中用作调整大小的拖动手柄（即可聚焦的”带值”变体——详见下文）。

separator 有两种形式：

• 静态 — 不可聚焦，不具备交互性。纯粹用于视觉或语义分隔。这是默认形式。
• 可聚焦 — 设置 tabindex="0"，用作拖动手柄（如两个面板之间）。支持 aria-valuenow、aria-valuemin、aria-valuemax 以暴露其位置，并响应方向键移动。

在水平工具栏中使用垂直分隔符时，需设置 aria-orientation="vertical"；默认方向为水平。

常见错误

• role="separator" 设置了 tabindex="0" 却没有键盘事件处理程序。用户将焦点移至该元素后无法进行操作。
• 可聚焦的分隔符缺少 aria-valuenow。屏幕阅读器无法播报分栏位置。
• 将 <hr> 用于纯装饰性线条。如果只是 CSS 边框，应省略 <hr>，改用 border-top 样式实现。
• 菜单中存在多个分隔符，却没有合理的分组依据——徒增杂乱。
• 水平工具栏中的垂直分隔符未设置 aria-orientation="vertical"。

示例

<!-- 菜单内的静态分隔符 -->
<ul role="menu" aria-label="File">
  <li role="menuitem" tabindex="0">New</li>
  <li role="menuitem" tabindex="-1">Open</li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Save</li>
</ul>

<!-- 可聚焦的分隔符（调整大小的手柄） -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>