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.

Kvinne i grønn genser holder opp laptop med musepeker på klikkeflate

På denne siden

    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>

    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