Gi brukeren mulighet til å hoppe direkte til hovedinnholdet.

Sektor:

    Hva er kravet?

    2.4.1 Hoppe over blokker.

    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

    For nettsider som har en blokk med innhold som blir gjentatt på flere sider på nettstedet, og som ligger før hovedinnholdet, er følgende oppfylt:

    • Det finnes en mekanisme for å hoppe til hovedinnholdet.
    • Mekanismen ligger blant de tre første tab-stegene, og før blokken med innhold på nettsiden.
    • Mekanismen er synlig ved tastaturfokus.
    • Mekanismen har en beskrivende tekst.
    • Ved aktivering av mekanismen, blir visuelt og funksjonelt fokus flyttet til hovedinnholdet.

    Løsningsforslag for 2.4.1 Hoppe over blokker

    Snarvei for å hoppe til hovedinnholdet

    Nettsteder har ofte mange faste elementer som ligger før det spesifikke innholdet på den aktuelle siden. Ved tastaturnavigasjon skal det være mulig å hoppe over innhold som blir gjentatt på flere sider, for eksempel menyer, lenker og topptekst. Snarveien gjør at brukeren kommer raskere til hovedinnholdet på den aktuelle siden. En slik mekanisme for å hoppe over innhold kan for eksempel være en snarveilenke, også kalt skip link, eller en knapp. Mekanismen skal være tilgjengelig blant de tre første Tab-stegene på siden, og hoppe til det første aktive elementet i hovedinnholdet.

    Hva som er første aktive element på en side, vil variere. Det kan være en lenke, en video, et lenket bilde, et skjemafelt eller lignende. Mekanismen skal flytte fokus både visuelt og funksjonelt, og snarveilenken eller knappen skal ha tekst som beskriver funksjonen. Når brukeren trykker på Tab-tasten første gang etter at mekanismen er aktivert, fortsetter navigasjonen fra og med første aktive element.

    Mekanismen kan være skjult i utgangspunktet, men skal bli synlig ved fokus. Flertallet av brukerne som navigerer med tastatur er seende, og synlig snarvei ved fokus er derfor en forutsetning. Husk også at snarveien skal være synlig og lesbar uavhengig av vindusstørrelse og forstørringsgrad.

    Kodeeksempel som viser mekanisme for å hoppe over hovedinnhold

    CSS

    .snarvei {
    position: absolute;
    left: -2000px;
    top: 0px;
    }

    .snarvei:focus {
    left: 0px;
    }

    HTML

    <a href="#hovedinnhold" class="snarvei">Hopp til hovedinnholdet</a>
    <!-- Meny og navigasjon som skal hoppes over legges her -->
    <section id="hovedinnhold" tabindex="-1">
    <h1>Hovedinnholdets tittel</h1>
    <a href="https://www.digdir.no">Lenke</a>
    </section>

    Unntak

    Nettsteder som kun består av én enkelt side vil ikke ha gjentakende innhold og trenger ikke en snarvei til hovedinnholdet.