Løsningsforslag etter tema Klikkeflate (Navigasjon)

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 med 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>

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>

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>

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.