Standards · ARIA

Role Document structure

separator

Marks an element as a divider between sections of content or items in a composite widget. Use <hr> first for thematic breaks in prose; reach for role="separator" when separating items inside a menu, toolbar, or other widget.

When to use

For a thematic break between sections of prose, use <hr>. The native element is announced as a separator in screen readers.

role="separator" on a non-<hr> element is appropriate inside composite widgets:

  • Between groups of menuitems inside a role="menu" or role="menubar".
  • Between groups of controls inside a role="toolbar".
  • As a resize handle in a split-pane layout (the focusable, “value-bearing” variant — see below).

There are two flavours of separator:

  • Static — not focusable, not interactive. Pure visual / semantic divider. The default.
  • Focusable — tabindex="0", used as a drag handle (e.g. between two panes). Supports aria-valuenow, aria-valuemin, aria-valuemax to expose its position, and responds to arrow keys to move.

Set aria-orientation="vertical" for vertical separators in horizontal toolbars; horizontal is the default.

Common failures

  • role="separator" with tabindex="0" but no keyboard handler. Users tab onto an element they cannot operate.
  • Focusable separator missing aria-valuenow. Screen readers cannot announce the split position.
  • Using <hr> for purely decorative lines. If it’s just a CSS border, leave the <hr> out and style with border-top.
  • Multiple separators in a menu with no logical grouping reason — clutter.
  • Vertical separator in a horizontal toolbar with no aria-orientation="vertical".

Example

<!-- Static separator inside a menu -->
<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>

<!-- Focusable separator (resize handle) -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>