Normative · ARIA

Ruolo Struttura del documento

separator

Segna un elemento come divisore tra sezioni di contenuto o voci di un widget composito. Utilizzare prima <hr> per le interruzioni tematiche nella prosa; ricorrere a role="separator" quando si separano voci all'interno di un menu, di una toolbar o di un altro widget.

Quando utilizzarlo

Per un’interruzione tematica tra sezioni di prosa, è opportuno usare <hr>. L’elemento nativo viene annunciato come separatore dagli screen reader.

role="separator" su un elemento non-<hr> è appropriato all’interno di widget compositi:

  • Tra gruppi di menuitem all’interno di un role="menu" o role="menubar".
  • Tra gruppi di controlli all’interno di un role="toolbar".
  • Come maniglia di ridimensionamento in un layout a pannelli divisi (la variante attiva sul focus e «portatrice di valore» — si veda di seguito).

Esistono due varianti di separator:

  • Statico — non ricevibile via focus, non interattivo. Divisore puramente visivo/semantico. Comportamento predefinito.
  • Attivo sul focus — tabindex="0", utilizzato come maniglia di trascinamento (ad esempio tra due pannelli). Supporta aria-valuenow, aria-valuemin, aria-valuemax per esporre la posizione, e risponde ai tasti freccia per spostarsi.

Impostare aria-orientation="vertical" per i separatori verticali nelle toolbar orizzontali; orizzontale è il valore predefinito.

Errori comuni

  • role="separator" con tabindex="0" ma senza gestore da tastiera. Gli utenti portano il focus su un elemento che non possono azionare.
  • Separator attivo sul focus privo di aria-valuenow. Gli screen reader non riescono ad annunciare la posizione del pannello.
  • Utilizzo di <hr> per linee puramente decorative. Se si tratta solo di un bordo CSS, è preferibile omettere l’<hr> e usare border-top.
  • Più separatori in un menu senza una ragione logica di raggruppamento — generano confusione.
  • Separator verticale in una toolbar orizzontale privo di aria-orientation="vertical".

Esempio

<!-- Separator statico all'interno di un 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>

<!-- Separator attivo sul focus (maniglia di ridimensionamento) -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>