separator

Hvornår bruges det

Til et tematisk skift mellem afsnit af løbende tekst bruges <hr>. Det native element annonceres som en separator i skærmlæsere.

role="separator" på et ikke-<hr>-element er passende inde i sammensatte widgets:

• Mellem grupper af menupunkter inde i role="menu" eller role="menubar".
• Mellem grupper af kontroller inde i role="toolbar".
• Som et ændrings-håndtag i et delt-rude-layout (den fokuserbare, “værdibærende” variant — se nedenfor).

Der er to varianter af separator:

• Statisk — ikke fokuserbar, ikke interaktiv. Ren visuel/semantisk skillelinje. Standard.
• Fokuserbar — tabindex="0", bruges som træk-håndtag (f.eks. mellem to ruder). Understøtter aria-valuenow, aria-valuemin, aria-valuemax til at eksponere sin position og reagerer på piletaster for at flytte.

Sæt aria-orientation="vertical" for lodrette separatorer i vandrette værktøjslinjer; vandret er standard.

Typiske fejl

• role="separator" med tabindex="0" men ingen tastaturhåndterer. Brugere taber til et element de ikke kan betjene.
• Fokuserbar separator uden aria-valuenow. Skærmlæsere kan ikke annoncere delepositionen.
• At bruge <hr> til rent dekorative linjer. Er det blot en CSS-kant, udelades <hr> og stiles med border-top.
• Mange separatorer i en menu uden logisk grupperingsårsag — rod.
• Lodret separator i en vandret værktøjslinje uden aria-orientation="vertical".

Eksempel

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