Klikkeflate (Navigasjon)

Klikkbare objekter må være lett å treffe for brukere med redusert presisjonsevne. Det er også viktig å ha store nok klikkeflater ved bruk av berøringsskjerm. Både størrelse på og avstand mellom objektene er viktig.

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

Løsninger som møter kravene i forskriften

Det er ingen krav i forskriften som direkte handler om bruk av mus eller berøringsskjerm.

Anbefalinger utover kravene i forskriften

Sørg for gode klikkeflater slik at det blir lett å treffe objektene med mus og på berøringsskjerm. Forslag til størrelse er minst 1x3 brødteksthøyder eller tilsvarende. Området av fingertuppen som berører skjermen er også en størrelse du kan ta utgangspunkt i. Vanlige eksempler:

Avkryssingsbokser tilhørende ledetekst

Med korrekt kodet ledetekst blir både tekst og avkryssningsboks klikkbare. Med feilkodet ledetekst blir bare selve avkryssningsboksen klikkbar.

Med denne koden blir det en veldig liten klikkeflate:

<input type=“checkbox“ id=”mandag” name=”mandag”><label>Mandag</label>

Ekempel der bare avkryssninsboksen er klikkbar.
 
 

For å kode dette korrekt og for å gjøre også teksten klikkbar, har du flere muligheter. 

a. Du kan koble sammen input og label. Det som står i labelens "for"-attributt må være samme som det som står i input-elmenentets "id"-attributt.

<input type=“checkbox“ id=”tirsdag” name=”tirsdag”><label for="tirsdag">Tirsdag</label>

Eksemepl der både avkryssningsboks og teksten er klikkbar
 
 

b. Du kan sette et label-element rundt input-elementet:

<label><input type=“checkbox“ id=”tirsdag” name=”tirsdag”>Tirsdag</label>

Knapper for ekspandering og kollaps

Disse knappene er ofte små for ikke å ta for mye fokus, men klikkeflaten kan likevel være god.

<a href=“#“ javascript=“expandCollapse()“><img src=“pil.png“ alt=“utvid kategori A“></a>
<a href=“#“ javascript=“expandCollapse()“ style=“padding: 6px;“><img src=“pil_ned.png“ alt=“kollaps kategori B“></a>

klikkeflate til knapper for ekspandering og kollapps
 
 

Lenkede bokstaver

Lenkede bokstaver for alfabetisk liste der bare bokstaven er klikkbar. 

<a href="#">I</a>
<a href="#" class="bokstavlenker">I</a>
CSS:
.bokstavlenker {
background-color: #CCC;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
text-decoration: none;
}

Ofte er tekst plassert på en flate, slik at tekst sammen med flaten oppfattes som ett objekt. Da er det gunstig om du lar hele flaten være klikkbar.

lenkende bokstaver med små og store klikkeflater
 
 

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?
*