ToggleGroup

Advarsel: dette er i kategorien halv-nerding, og du må kunne litt skjermleser for at dette skal gi mening.

ToggleGroup er en komponent fra NAVs designsystem (Aksel). Komponenten ligner mye på faner. Innhold på siden bestemmes av hvilken knapp som velges, men brukes tastaturet for å flytte til en annen knapp velges ikke knappen (da må du ta Enter eller Mellomrom). Dette kan være hensiktsmessig hvis det tar litt tid å laste innholdet for hver av knappene, og dette kan også være en grunn til å ikke bruke for eksempel en native radioknapp (i tillegg til utseende selvsagt).

Jeg jobber med Aksel og der var ToggleGroup kodet med role=radiogroup og hver knapp med aria-checked. Først da jeg testet en ny løsning med skjermleser la jeg merke til hvor uhensiktsmessig denne kodingen kunne være. Først gjorde jeg et valg i en radioknapp. Så gikk jeg videre til en ToggleGroup, men denne var jo kodet som radio. Jeg pilte og trodde jeg hadde gjort et valg, men det eneste jeg hadde gjort var å flytte fokus. I native radio velger du samtidig som du piler. Etter hvert så jeg med leselist at valget i ToggleGroup ikke ble endret når jeg pilte, og hadde jeg hørt veldig godt etter hadde jeg jo også hørt at valget jeg kom til ikke ble avkrysset. Ganske uheldig at to kontroller som presenteres nøyaktig på samme måte for skjermleser fungerer ulikt. For å se på fordeler og ulemper med ulik koding har jeg laget noen eksempler. I ulike designsystemer gjøres dette på forskjellig måte, så det finnes ikke en standard for ToggleGroup (det samme er tilfelle for andre komponenter med ikke-native funksjonalitet).

En ting som kompliserer dette litt: Hvis du bruker virtuell modus (Jaws) og andre typiske lese-moduser med skjermleser vil både Radio og ToggleGroup fungere helt greit. Problemstillingen er altså hvis du er i skjemamodus og trykker Tab fra felt til felt. Skjemamodus har ulike navn i ulike skjermlesere. I NVDA og Windows skjermleser heter det fokus-modus. Det jeg skriver om skjermlesere nedefor handler om fokus/applikasjonsmodus. Jeg har kun brukt Edge og Safari for iPhone/Mac. Poenget har ikke vært å beskrive alle detaljer, men få fram at her er det ulikheter mellom skjermlesere.

Valg for tastaturnavigering: Piltaster brukes for å flytte fokus i alle variantene nedenfor. Tab flytter ut av kontrollen. Jeg har valgt å beholde fokus på knappen som har fokus når du tabber ut av ToggleGroup-varianten. Jeg tror dette er mest effektivt for brukerne, men et alternativ er selvsagt å la fokus være på den valgte toggle'n.

ToggleGroup lar brukeren ta valg som påvirker innholdet på siden. Komponenten består av en gruppe knapper som henger sammen og bare én knapp kan være valgt om gangen.

Egnet til:

• Filtrering av innhold
• Veksling av datavisninger og innhold

Uegnet til:

• Erstatning for radio eller checkbox
• Navigasjon

<fieldset>
  <legend>Velg boligtype</legend>
  <input id="telt" type="radio" name="boligtype" value="telt" checked>
  <label for="telt">Telt</label><br>
  <input type="radio" id="leilighet" name="boligtype" value="leilighet">
  <label for="leilighet">Leilighet</label><br>
  <input type="radio" id="enebolig" name="boligtype" value="enebolig">
  <label for="enebolig">Enebolig</label><br>
</fieldset>
      

<div id="x2" role="radiogroup" aria-label="Velg boligtype">
  <button role="radio" aria-checked="true" tabindex="0">Telt</button>
  <button role="radio" aria-checked="false" tabindex="-1">Leilighet</button>
  <button role="radio" aria-checked="false" tabindex="-1">Enebolig</button>
</div>
        

<div aria-live="assertive" id="x3" role="group" aria-label="Velg boligtype">
  <button aria-pressed="true" tabindex="0">Telt</button>
  <button aria-pressed="false" tabindex="-1">Leilighet</button>
  <button aria-pressed="false" tabindex="-1">Enebolig</button>
</div>
      

<div aria-live="assertive" id="x3b" role="group" aria-label="Velg boligtype" aria-describedby="x3b-desc">
  <button aria-pressed="true" tabindex="0">Telt</button>
  <button aria-pressed="false" tabindex="-1">Leilighet</button>
  <button aria-pressed="false" tabindex="-1">Enebolig</button>
  <div class="sr-only" id="x3b-desc" aria-hidden="true">Kun en knapp kan velges av gangen.</div>
</div>
      

<div aria-liv="assertive" id="x4" role="group" aria-label="Velg boligtype">
  <button aria-current="true" tabindex="0">Telt</button>
  <button aria-current="false" tabindex="-1">Leilighet</button>
  <button aria-current="false" tabindex="-1">Enebolig</button>
</div>
      

<div id="x5" role="tablist" aria-label="Velg boligtype">
  <button role="tab" aria-selected="true" tabindex="0">Telt</button>
  <button role="tab" aria-selected="false" tabindex="-1">Leilighet</button>
  <button role="tab" aria-selected="false" tabindex="-1">Enebolig</button>
</div>