Fokusmarkering (Navigasjon)

Det holder ikke at funksjonalitet er mulig å bruke, det må også være lett å se hvilket objekt som har fokus. Hvis brukeren ikke klarer å se hvor fokus er, blir tastaturnavigering i praksis umulig.

Introduksjon

Alle nettlesere har en standard markering av hvilket objekt som har fokus. Avhengig av utseendet på nettstedets objekter kan denne markeringen være utilstrekkelig på alle eller noen objekter.

objekt som bare har standard fokus-markering og blir ikke tydelig fremhevet
 
 

Løsninger som møter kravene i forskriften

Alle objekter som kan få fokus ved tastaturnavigering skal få tydelig markering av fokus. Definerer du spesifikt utseende for objekt ved fokus, sikrer du at brukeren skjønner hvor hun befinner seg på siden. Slik fokusmarkering definerer du ved hjelp av CSS. Du kan bruke samme utseende som ved peking med mus, eller du kan definere et eget utseende.

Kodeeksempel på fokusdefinering:

.clickable {
color: black;
background-color: #CCCCCC;
}
.clickable:focus {
color: white;
background-color: #333333;
}

Meny med tydelig fokus av aktiv knapp.
 
 

Anbefalinger utover kravene i forskriften

Effekter ved peking med musen har som formål å bekrefte for brukeren at objektet er klikkbart, og kan være ganske subtil.

Fokusmarkering skal ikke bare bekrefte at objektet er aktivt, men i mange sammenhenger er det nødvendig å dra oppmerksomheten til brukeren til det aktuelle objektet. Derfor kan fokusmarkering gjerne være vesentlig mer markant enn hovereffekt ved musepeking. 

Illustrasjon som sammenligner opprinnelig utseende, subtil hovereffekt og mer markant fokusmarkering:

illustrasjon som sammenligner opprinnelig utseende, subtil hovereffekt og mer markant fokusmarkering
 
 
Publisert: 01. 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?
*