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.
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:
Eksempel på feil
Grafiske avkryssingsfelt uten wai-aria fungerer ikke med for eksempel skjermleser. Oftest kan de heller ikke brukes med tastatur.
Her finner du et eksempel, under spørsmålet «Which of the following are Norwegian counties?:
WCAG-feil (p004.html