separator

Kiedy używać

Do tematycznej przerwy między sekcjami tekstu użyj <hr>. Natywny element jest ogłaszany przez czytniki ekranu jako separator.

role="separator" na elemencie innym niż <hr> jest odpowiednie wewnątrz złożonych widżetów:

• Między grupami elementów menu w role="menu" lub role="menubar".
• Między grupami kontrolek w role="toolbar".
• Jako uchwyt do zmiany rozmiaru w układzie z podzielonym panelem (wariant z fokusem i „bieżącą wartością” — patrz niżej).

Separator występuje w dwóch wariantach:

• Statyczny — bez fokusu, nieinteraktywny. Czysto wizualny / semantyczny separator. Domyślny.
• Z fokusem — tabindex="0", używany jako uchwyt do przeciągania (np. między dwoma panelami). Obsługuje aria-valuenow, aria-valuemin, aria-valuemax do ogłaszania pozycji i reaguje na klawisze strzałek podczas przesuwania.

Ustaw aria-orientation="vertical" dla pionowych separatorów w poziomych paskach narzędzi; pozioma jest wartością domyślną.

Typowe błędy

• role="separator" z tabindex="0", ale bez obsługi klawiatury. Użytkownicy trafiają na element, którego nie mogą obsługiwać.
• Separator z fokusem bez aria-valuenow. Czytniki ekranu nie mogą ogłosić pozycji podziału.
• Używanie <hr> dla czysto dekoracyjnych linii. Jeśli to tylko obramowanie CSS, pomiń <hr> i użyj border-top.
• Wiele separatorów w menu bez logicznego powodu grupowania — zbędny szum.
• Pionowy separator w poziomym pasku narzędzi bez aria-orientation="vertical".

Przykład

<!-- Statyczny separator w 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 z fokusem (uchwyt zmiany rozmiaru) -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>