separator

När du ska använda det

För ett tematiskt avbrott mellan prosasektioner, använd <hr>. Det nativa elementet annonseras som en avdelare i skärmläsare.

role="separator" på ett icke-<hr>-element är lämpligt inuti sammansatta widgets:

• Mellan grupper av menyobjekt inuti ett role="menu" eller role="menubar".
• Mellan grupper av kontroller inuti ett role="toolbar".
• Som ett handtag för att ändra storlek i en delad vylayout (den fokuserbara, “värdebuande” varianten — se nedan).

Det finns två varianter av separator:

• Statisk — inte fokuserbar, inte interaktiv. Ren visuell/semantisk avdelare. Standard.
• Fokuserbar — tabindex="0", används som ett draghandtag (t.ex. mellan två paneler). Stöder aria-valuenow, aria-valuemin, aria-valuemax för att exponera sin position och svarar på piltangenter för att flytta.

Ange aria-orientation="vertical" för vertikala avdelare i horisontella verktygsfält; horisontell är standard.

Vanliga fel

• role="separator" med tabindex="0" men utan tangentbordshanterare. Användare tabbar till ett element de inte kan hantera.
• Fokuserbar separator som saknar aria-valuenow. Skärmläsare kan inte annonsera delningspositionen.
• Att använda <hr> för rent dekorativa linjer. Om det bara är en CSS-kant, utelämna <hr> och styla med border-top.
• Flera separatorer i en meny utan logisk grupperingsanledning — rörigt.
• Vertikal separator i ett horisontellt verktygsfält utan aria-orientation="vertical".

Exempel

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