Tastaturnavigering

Mange brukere kan ikke eller ønsker ikke å bruke mus. All funksjonalitet på nettstedet må derfor være mulig å benytte ved hjelp av tastatur alene, og med tastatur sammen med hjelpemiddel.

Brukere som navigerer med bare tastatur er gjerne brukere med motoriske funksjonsnedsettelser, belastningsskader eller brukere som av annen grunn ikke kan eller ikke ønsker å benytte mus. Tab-tasten brukes for å hoppe mellom aktive objekter, eventuelt sammen med Shift for å hoppe bakover, og Enter for å aktivere et objekt. I enkelte situasjoner benytter brukeren også piltastene, for eksempel for å bla seg gjennom valg i en nedtrekksliste eller hvis brukeren også har et hjelpemiddel.

Løsninger som møter kravene i forskriften

Rekkefølge og tabindex

Forskriften krever at rekkefølgen ved tastaturnavigering ivaretar mening og struktur av nettsiden. Det vil også gi positiv effekt på brukeropplevelsen. For eksempel skal menyvalg følge etter hverandre på en naturlig måte, avhengig av menykonsept, nivå og menygren.

Rekkefølgen skal omfatte alle aktive objekter, og dessuten er det viktig at brukeren ikke havner i en tastaturfelle, der brukeren blir sittende fast i et element eller gruppe av elementer.

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 linker, 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=“Difi – 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>

Tastatur sammen med hjelpemiddel

Brukere med hjelpemiddel kan også ha behov for å navigere med tastatur, men for en del brukere er det ikke tilstrekkelig å nå bare det aktive innholdet. For eksempel vil sterkt svaksynte brukere med skjermleser ha behov for å få opplest alt innhold, ikke bare lenker og skjemaobjekt. Med skjermleser brukes piltastene for å bevege seg gjennom alt innholdet, tidvis supplert med Tab-tasten.

Når objekter ikke er aktive i HTML-koden, men gjøres aktive med JavaScript, må dette formidles til brukerne. I tillegg til tabindex må du bruke WAI-ARIA-attributtet role:

<div tabindex=“0“ role=“button“>Objekt med javascriptfunksjon</div>

Dekkende lag

I mange situasjoner kan det være fornuftig å legge inn midlertidig informasjon som legger seg oppå sidens innhold. Dette kalles gjerne dekkende lag eller modalboks, og brukes for eksempel til å vise søkeforslag, ordforklaringer, bildekaruseller eller presentere et skjema.

Det er viktig at fokus settes til starten av denne informasjonen både visuelt og i koden. Hvis ikke vil brukere som navigerer med tastatur få problemer å få tak på informasjonen i dette laget. Hvordan du oppnår riktig fokus er avhengig av hvordan informasjonen hentes frem:

  • Hvis koden for det dekkende laget lastes inn uten sideomlasting, skal den lastes inn direkte etter objektet som aktiverte det dekkende laget
  • Er koden allerede til stede i siden, og informasjonen hentes frem ved flytting av objekter og/eller endring av synlighet, plasserer du fokus med samme metodikk som for å lage snarveier.

Unngå unødvendig omlasting av siden

Omlasting av siden er svært krevende for mange brukere, deriblant brukere med konsentrasjonsvansker, brukere som benytter forstørring og brukere som navigerer med tastatur. I spesielle tilfeller kan det resultere i at nettsiden eller tjenesten blir umulig å benytte for enkelte brukere. Unngå derfor å laste om siden med mindre det er strengt nødvendig. I de tilfellene det er nødvendig å endre innhold på siden, bør du tilstrebe å laste dette inn uten sideomlasting.

Et vanlig brudd er at endring av valg i skjema resulterer i sideomlasting.  For eksempel vil mange brukere som navigerer med tastatur bruke piltastene for å endre valg i nedtrekkslister, og Enter for å bekrefte. Først på Enter kan siden lastes om hvis nødvendig.

Anbefalinger utover kravene i forskriften

Duplikate lenker til samme lenkemål kan bli krevende for brukere som navigerer med tastatur, fordi det blir mange overflødige steg. Et vanlig tilfelle er at en nyhetsartikkel frontes med bilde, overskrift, introtekst og lenke. For å øke klikkeflaten er det mange som lager separate lenker på mange eller alle disse, med resultat at det blir mange duplikate steg ved tastaturnavigering. Dersom det er en lang liste med slike objekter kan det bli så krevende at brukeren gir opp.

Det finnes teknikker med JavaScript som lar et større område være klikkbart, samtidig som det er bare ett steg med tastaturnavigering som kan aktiveres med Enter. Da vil du samtidig unngå inaktive områder innimellom de ulike elementene i gruppen. Husk i så fall at det er enkelte brukere som ikke har JavaScript, så du bør samtidig bruke JavaScript til å laste inn noe av koden.

<div class="clickable" tabindex="0"onClick=”goTilLenke(link1)”>
  <h3>Overskrift</h3>
  <img src="http://bilde.jpg" alt="eksempelbilde">
  <p>Introtekst som forteller litt om innholdet på lenkemålet.</p>
  <p><a href="http://tekst.html" tabindex="-1" id=“link1“>Lenketekst</a></p>
</div>

 

Publisert: 02. jul 2015, Sist endret: 28. mar 2017

Deldette

Fant du det du lette etter?

Stjerne(*) er obligatoriske felter som du må fylle ut for å sende skjemaet. 

MERK: Du får ikke svar på denne meldingen. Har du spørsmål du ønsker svar på send oss en e-post til uu@difi.no.

Fant du det du lette etter?
*