Avkryssingsfelt

Avkryssingsfelt (og andre kontroller) skal leses opp riktig og fungere med tastatur.

Har du egenutviklede avkryssingsfelt (checkbox) må du passe spesielt på at disse kan leses opp riktig (SK 4.1.2) og at tastatur fungerer som det skal (SK 2.1.1).

Slik skal avkryssingsfelt fungere med tastatur

  • Tab skal flytte til avkryssingsfeltet (tabstop).
  • Mellomrom brukes for å krysse av og på.

Standard HTML

Bruker du HTML som vist nedenfor fungerer avkryssingsfeltene som de skal.

<input type="checkbox" id="xyz" name="forsikring" value="tilleggsforsikring">
<label for="xyz">Inkluder tilleggsforsikring</label>>

Gruppe med avkryssingsfelt

Hvis du har flere avkryssingsfelt som hører sammen skal du bruke fieldset og legend. Skjermlesere vil da lese opp både hovedledeteksten (legend), alternativene og om det er krysset av eller ikke.

Tips:: Det fungerer best hvis legend ikke er for lang. Skjermlesere leser hele legend for hver enkelt verdi, og det blir fort veldig mye å høre på og dermed lite effektivt.

Vis kode
Hva slags nyheter vil du motta:











Egenutviklede avkryssingsfelt

WAI-ARIA kan brukes hvis du av en eller annen grunn ikke vil bruke standard HTML. Benytt attributtene role="checkbox" for å merke som avkryssingsfelt og aria-checked for å angi tilstand.

aria-checked kan ha ttre verdier:

  • aria-checked=»true»: avkrysset
  • aria-checked=»false»: ikke avkrysset
  • aria-checked=»mixed»: delvis avkrysset

Eksempel på et avkryssingsfelt med tre verdier: