separator

Milloin käyttää

Tekstiosioiden temaattiseen katkokseen käytä <hr>. Natiivielementti ilmoitetaan erottimena ruudunlukuohjelmissa.

role="separator" ei-<hr>-elementissä sopii yhdistelmäwidgettien sisälle:

• Valikkokohtiaryhmien väliin role="menu" tai role="menubar" -elementissä.
• Säädinryhmien väliin role="toolbar" -elementissä.
• Koon muuttamiskahvana jaetun ruudun asettelussa (kohdistettava, “arvoaan kantava” muoto — katso alla).

Erottimesta on kaksi muotoa:

• Staattinen — ei kohdistettava, ei interaktiivinen. Puhtaasti visuaalinen / semanttinen erotin. Oletusmuoto.
• Kohdistettava — tabindex="0", käytetään vetokahvana (esim. kahden ruudun välissä). Tukee aria-valuenow-, aria-valuemin- ja aria-valuemax-attribuutteja sijainnin ilmoittamiseksi, ja reagoi nuolinäppäimiin liikkumiseen.

Aseta aria-orientation="vertical" pystysuuntaisille erottimille vaakasuuntaisissa työkalupalkeissa; vaakasuunta on oletusarvo.

Yleisimmät virheet

• role="separator" tabindex="0":lla mutta ilman näppäimistökäsittelijää. Käyttäjät siirtyvät elementille, jota he eivät pysty käyttämään.
• Kohdistettava erotin ilman aria-valuenow-attribuuttia. Ruudunlukuohjelmat eivät pysty ilmoittamaan jaon sijaintia.
• <hr>:n käyttäminen puhtaasti dekoratiivisiin viivoihin. Jos kyseessä on vain CSS-reunaviiva, jätä <hr> pois ja käytä border-top-tyylittelyä.
• Useita erottimia valikossa ilman loogista ryhmittelysyytä — aiheuttaa epäjärjestystä.
• Pystysuuntainen erotin vaakasuuntaisessa työkalupalkissa ilman aria-orientation="vertical".

Esimerkki

<!-- Staattinen erotin valikossa -->
<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>

<!-- Kohdistettava erotin (koon muuttamiskahva) -->
<div
  role="separator"
  tabindex="0"
  aria-orientation="vertical"
  aria-valuenow="40"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Resize panels"
></div>