Sørg for at alt innhold får synlig fokus når du navigerer med tastatur.

Sektor:

    Hva er kravet?

    2.4.7 Synlig fokus.

    Hva bør jeg teste?

    Her er en oppsummering av våre testregler og hva som er forventet resultat av testingen.

    Hvordan oppnå samsvar med kravet

    Alle elementer det er mulig å betjene med tastaturet, får synlig fokusmarkering. Dette gjelder ikke dersom det bare finnes ett element det er mulig å betjene med tastatur på nettsiden.

    Løsningsforslag for 2.4.7 Synlig fokus

    Fokusmarkering

    Alt innhold brukeren kan navigere til med tastatur skal få synlig fokusmarkering. Dette sikrer at brukeren vet hvor på nettsiden han befinner seg, og gjør det mulig å se hvilket element som har fokus til enhver tid.

    Fokusmarkeringen skal være godt synlig, slik at det er tydelig hva som er i fokus. Eksempel på synlig fokusmarkering er

    • ramme, linje eller understreking
    • endret farge på bakgrunn eller tekst
    • skyggelegging
    • tekstmarkør (loddrett strek) eller markering av tekst i skjemafelt
    • annen form for visuell forandring

    Alle nettlesere har en innebygget standardmarkering av elementer som har fokus. Markeringen er ofte en stiplet eller heltrukken linje, som omkranser elementet i fokus.

    Eksempelet viser en type standardmarkering som er en stiplet linje rundt menypunktet som er i fokus:

    Tre menyelementer, der det markerte elementet bare har standard fokusmarkering og blir ikke tydelig fremhevet.

    Avhengig av utseendet på nettstedets elementer kan denne markeringen være utilstrekkelig på alle eller noen elementer. Både bakgrunnsfarge, mønster og farge på enkeltelementer vil påvirke dette.

    Dersom standardmarkeringen i nettleseren er for svak skal dette korrigeres ved bruk av mer styling. Eventuell ekstra fokusmarkering definerer du i CSS. Du kan bruke samme utseende som ved peking med mus, eller du kan bestemme et eget utseende.

    I dette eksempelet har menypunktet som er i fokus standardmarkering, i tillegg endres bakgrunnsfargen på elementet når det får fokus ved mus eller tastaturnavigasjon, slik at det er enda tydeligere hvilket element som har fokus:

    Meny med tydelig fokus av aktiv knapp.

    Kodeeksempel for fokusdefinering

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