separator

Wanneer te gebruiken

Gebruik voor een thematische onderbreking tussen secties van lopende tekst <hr>. Het native element wordt door schermlezers aangekondigd als scheidingslijn.

role="separator" op een niet-<hr>-element is passend binnen samengestelde widgets:

• Tussen groepen menuitems binnen een role="menu" of role="menubar".
• Tussen groepen besturingselementen binnen een role="toolbar".
• Als formaatgreep in een gesplitste-vensterlayout (de focusbare, “waardedragende” variant — zie hieronder).

Er zijn twee varianten van separator:

• Statisch — niet focusbaar, niet interactief. Puur visuele/semantische scheidingslijn. De standaard.
• Focusbaar — tabindex="0", gebruikt als sleepgreep (bijv. tussen twee vensters). Ondersteunt aria-valuenow, aria-valuemin, aria-valuemax om de positie weer te geven, en reageert op pijltoetsen voor verplaatsing.

Stel aria-orientation="vertical" in voor verticale scheidingslijnen in horizontale werkbalken; horizontaal is de standaard.

Veelvoorkomende fouten

• role="separator" met tabindex="0" maar zonder toetsenbordhandler. Gebruikers tabben naar een element dat ze niet kunnen bedienen.
• Focusbare separator zonder aria-valuenow. Schermlezers kunnen de splitspositie niet aankondigen.
• <hr> gebruiken voor puur decoratieve lijnen. Als het slechts een CSS-rand is, laat de <hr> weg en stijl met border-top.
• Meerdere separators in een menu zonder logische groeperingsreden — rommel.
• Verticale separator in een horizontale werkbalk zonder aria-orientation="vertical".

Voorbeeld

<!-- 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>