Rôle Structure du document

`separator`

Marque un élément comme séparateur entre des sections de contenu ou des éléments dans un widget composite. Utilisez d'abord <hr> pour les ruptures thématiques dans la prose ; utilisez role="separator" pour séparer des éléments dans un menu, une barre d'outils ou un autre widget.

Quand l’utiliser

Pour une rupture thématique entre des sections de prose, utilisez <hr>. L’élément natif est annoncé comme séparateur par les lecteurs d’écran.

role="separator" sur un élément autre que <hr> est approprié dans les widgets composites :

Entre des groupes d’éléments de menu dans un role="menu" ou role="menubar".
Entre des groupes de contrôles dans une role="toolbar".
Comme poignée de redimensionnement dans une mise en page à volets séparés (la variante focalisable, « porteuse de valeur » — voir ci-dessous).

Il existe deux variantes de separator :

Statique — non focalisable, non interactif. Séparateur purement visuel et sémantique. Comportement par défaut.
Focalisable — tabindex="0", utilisé comme poignée de glissement (par exemple entre deux volets). Supporte aria-valuenow, aria-valuemin, aria-valuemax pour exposer sa position, et répond aux touches fléchées pour se déplacer.

Définissez aria-orientation="vertical" pour les séparateurs verticaux dans les barres d’outils horizontales ; horizontal est la valeur par défaut.

Erreurs fréquentes

role="separator" avec tabindex="0" mais sans gestionnaire de clavier. Les utilisateurs accèdent par tabulation à un élément qu’ils ne peuvent pas actionner.
Séparateur focalisable sans aria-valuenow. Les lecteurs d’écran ne peuvent pas annoncer la position de la séparation.
Utiliser <hr> pour des lignes purement décoratives. S’il ne s’agit que d’une bordure CSS, omettez le <hr> et stylisez avec border-top.
Plusieurs séparateurs dans un menu sans raison logique de regroupement — encombrement inutile.
Séparateur vertical dans une barre d’outils horizontale sans aria-orientation="vertical".

Exemple

<!-- Séparateur statique dans 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>

<!-- Séparateur focalisable (poignée de redimensionnement) -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>