Gå til innhold

2.1.1 Tastatur

Klikk her for å leseskjule dette kravet

Krav:

All funksjonalitet i innholdet kan betjenes via et tastaturgrensesnitt uten at det er behov for tidsberegning av de enkelte tastetrykkene, unntatt hvis den underliggende funksjonen krever inndata som er avhengige av rekkefølgen på brukerens bevegelser, og ikke bare av sluttpunktene.

Merknad 1: Dette unntaket gjelder den underliggende funksjonen, ikke inndatateknikken. Hvis teksten for eksempel skrives inn med håndskrift, krever inndatateknikken (håndskrift) inndata i en bestemt rekkefølge, men den underliggende funksjonen (tekstlige inndata) gjør det ikke.

Merknad 2: Dette er ikke et forbud mot og bør ikke hindre bruk av mus eller andre inndatametoder i tillegg til tastatur.

Kilde: Direktoratet for forvaltning og IKT (åpnes i nytt vindu)

Hva betyr dette kravet?

En del av brukerne på din nettside vil benytte seg av tastatur for å navigere rundt på siden. Det er derfor viktig at alt innholdet kan nås og betjenes via tastaturet.

Forskriften krever at rekkefølgen ved tastaturnavigering følger den logiske meningen og strukturen til nettsiden. Rekkefølgen for tastaturnavigering følger normalt rekkefølgen i koden. Dette kan overstyres ved å bruke attributtet tabindex:

  • Uten tabindex: Tabulatoren (markøren) beveger gjennom kode fra topp til bunn. Kun standard autofokuserbare elementer som linker, knapper og input-felt får fokus.
  • Tabindex = 0: Markøren beveger seg gjennom koden fra topp til bunn. Både autofokuserte elementer samt de som har en tabindexverdi på 0, får fokus.
  • Tabindex >0: Tabulatoren beveger seg først gjennom alle elementer som har tabindexverdi høyre enn 0, fra laveste til høyeste nummer, uavhengig av hvor elementet er plassert i koden. Markeringen fortsetter gjennom koden fra siste element med positiv verdi.
  • Tabindex < 0: Tabulatoren hopper over alle elementer som er markert med tall lavere enn 0. -1 kan brukes på alle. 

 

Kodeeksempel

Tabindex styrer rekkefølgen på fokuselementer:

<a href="http://www.w3schools.com/" tabindex="2">W3Schools</a><br />
<a href="http://www.google.com/" tabindex="1">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
Gå til toppen av siden