Presenter innholdet i en logisk rekkefølge.
Hva er kravet?
Hva bør jeg teste?
Her er en oppsummering av våre testregler og hva som er forventet resultat av testingen.
Hvordan oppnå samsvar med kravet
Kravet kan oppfylles på flere måter.
For innhold som får fokus ved tastaturnavigasjon og må navigeres i en bestemt rekkefølge, er én av følgende oppfylt:
- Tastaturrekkefølge og visuell rekkefølge er lik.
- Tastaturrekkefølge og visuell rekkefølge er ikke lik, men det er mulig å forstå og bruke innholdet.
Løsningsforslag for 2.4.3 Fokusrekkefølge
Tastaturrekkefølge og tabindex
Rekkefølgen ved tastaturnavigasjon skal ivareta mening og struktur på nettsiden.
Hvis innholdet på nettsiden er ment å navigeres i en bestemt rekkefølge, skal dette gjenspeiles i tastaturrekkefølgen. En tastaturrekkefølge som skiller seg vesentlig fra den visuelle rekkefølgen, kan forvirre brukeren. Tastaturrekkefølgen trenger ikke å være helt lik den visuelle rekkefølgen, så lenge brukeren kan forstå og bruke innholdet.
Tastaturrekkefølgen skal omfatte alle aktive elementer, som lenker, knapper og skjemaelementer. For eksempel skal menyvalg følge etter hverandre på en logisk måte, avhengig av menykonsept, nivå og menygren. I et skjema skal brukerne kunne navigere gjennom alle skjemafeltene før de kommer til knappen for å sende inn skjemaet.
Rekkefølgen for tastaturnavigering følger normalt rekkefølgen i koden. Dette kan overstyres ved hjelp av attributtet tabindex:
- Uten tabindex: Tabulator beveger seg sekvensielt gjennom koden fra topp til bunn. Bare standard autofokuserbare elementer som lenker, knapper og input-felt får fokus.
- Tabindex = 0: Tabulator beveger seg sekvensielt gjennom koden fra topp til bunn. Både autofokuserbare elementer og andre elementer som har tabindexverdi 0 får fokus.
- Tabindex > 0: Tabulatoren beveger seg først gjennom alle elementer som har tabindexverdi > 0, fra laveste til det høyeste nummeret uansett hvor elementene ligger i koden. Fra siste objekt med positiv verdi fortsetter tabulering fra dette objektets plassering i koden.
- Tabindex < 0: Tabulatoren hopper over disse elementene. Bruk gjerne -1 på alle, her er det ikke nødvendig med ulike verdier.
Bruk tabindex med omtanke, og avslutt den prioriterte rekkefølgen med et objekt som ligger før alle objekter som ikke har prioritering.
Forenklet kodeeksempel med rekkefølge som slutter øverst i koden:
<body><a href=“#hovedinnhold“ tabindex=“1“>Gå til innholdet</a><a href=“startsiden.html“><img src=“logo.gif“ alt=“Digdir – startsiden“ tabindex=“4“>...<input type=“search“ title=“Søk“ tabindex=“2“><input type=“submit" name="Søk" id="Søk" value="Søk"tabindex="3">...</body></html>