Standards · ARIA

Rolle Dokumentstruktur

separator

Markiert ein Element als Trennlinie zwischen Inhaltsbereichen oder Einträgen in einem zusammengesetzten Widget. Für thematische Absätze in Fließtext sollte zuerst <hr> verwendet werden; role="separator" kommt zum Einsatz, wenn Einträge innerhalb eines Menüs oder einer Symbolleiste getrennt werden.

Verwendung

Für thematische Unterbrechungen zwischen Prosa-Abschnitten sollte <hr> verwendet werden. Das native Element wird von Screenreadern als Trennzeichen angekündigt.

role="separator" auf einem Nicht-<hr>-Element ist innerhalb zusammengesetzter Widgets angemessen:

  • Zwischen Gruppen von Menüeinträgen innerhalb eines role="menu" oder role="menubar".
  • Zwischen Gruppen von Steuerelementen innerhalb einer role="toolbar".
  • Als Größenänderungs-Handle in einem Split-Pane-Layout (die fokussierbare, „werttragende“ Variante — siehe unten).

Es gibt zwei Varianten des Separators:

  • Statisch — nicht fokussierbar, nicht interaktiv. Rein visueller bzw. semantischer Trenner. Die Standardvariante.
  • Fokussierbar — tabindex="0", wird als Drag-Handle verwendet (z. B. zwischen zwei Fenstern). Unterstützt aria-valuenow, aria-valuemin, aria-valuemax, um die Position offenzulegen, und reagiert auf Pfeiltasten zur Verschiebung.

Für vertikale Separatoren in horizontalen Symbolleisten sollte aria-orientation="vertical" gesetzt werden; horizontal ist der Standardwert.

Häufige Fehler

  • role="separator" mit tabindex="0", aber ohne Tastatur-Handler. Nutzende gelangen per Tab auf ein Element, das sie nicht bedienen können.
  • Fokussierbarer Separator ohne aria-valuenow. Screenreader können die geteilte Position nicht ankündigen.
  • Verwendung von <hr> für rein dekorative Linien. Handelt es sich nur um einen CSS-Rahmen, sollte das <hr> weggelassen und stattdessen mit border-top gestaltet werden.
  • Mehrere Separatoren in einem Menü ohne logischen Gruppierungsgrund — erzeugt unnötigen Ballast.
  • Vertikaler Separator in einer horizontalen Symbolleiste ohne aria-orientation="vertical".

Beispiel

<!-- Statischer Separator innerhalb eines Menüs -->
<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>

<!-- Fokussierbarer Separator (Größenänderungs-Handle) -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>