Brukeren skal ha mer kontroll over innholdet på nettsiden som får fokus med musepeker eller tastatur.

Sektor:

    Hva er kravet?

    1.4.13 Pekerfølsomt innhold eller innhold ved tastaturfokus.

    Hva bør jeg teste?

    Ekstra innhold som kommer til syne ved tastaturfokus eller mouseover og der det ekstra innholdet forsvinner når tastaturfokus eller mouseover blir tatt vekk.

    Hva er forventet resultat?

    Dersom innholdsprodusenter velger å la ekstra innhold komme til syne og forsvinne i forbindelse med mouseover og tastaturfokus, må tre vilkår være oppfylt samtidig:

    Mulig å avvise: Det finnes en mekanisme for å avvise, eller lukke, det ekstra innholdet uten å flytte musepekeren eller tastaturfokuset, med mindre det ekstra innholdet formidler en inndatafeil eller det ikke forstyrrer eller erstatter annet innhold. Dette vilkåret kan oppfylles på flere måter:

    • Plasser det ekstra innholdet slik at det ikke dekker over annet innhold, med unntak av pynt og whitespace. Innholdet som gjorde at det ekstra innholdet kom til syne, skal heller ikke dekkes til.
    • Det er mulig å bruke en mekanisme for å avvise/lukke det ekstra innholdet, for eksempel Esc-tasten eller en lukk-knapp.

    Mulig å bruke med mouseover: Dersom mouseover får ekstra innhold til å komme til syne, kan pekeren flyttes over det ekstra innholdet uten at innholdet forsvinner.

    Vedvarende: Det ekstra innholdet forblir synlig helt til

    • brukeren flytter musepekeren eller tastaturfokus vekk fra innholdet som fikk det ekstra innholdet til å komme til syne,
    • brukeren avviser eller lukker det ekstra innholdet (se vilkåret over) eller
    • informasjonen i det ekstra innholdet ikke lenger er gyldig. Eksempel på dette er statusbeskjeder om at innhold laster eller er opptatt, som ikke lenger er gyldig når innholdet er lastet ferdig.

    Løsningsforslag for 1.4.13 Pekerfølsomt innhold eller innhold ved tastaturfokus

    For CSS bruk: pseudoklassene :hover og :fokus.
    For Aria bruk: role="tooltip".

    Eksempel 1: Innholdsforhåndsvisning for lenker

    Når du holder markøren over eller fokuserer på en lenke, vises en forhåndsvisning av innholdet i lenka rett over eller under lenka. Brukere kan flytte pekeren over tilleggsinnholdet (popup) slik at de kan lese tilleggsinnholdet fullt ut. Ved å trykke på Esc-tasten avvises (lukkes) tilleggsinnholdet.

    HTML av eksempel 1

    <p>Dette er <a class="a-and-tooltip" id="parent" href="index.html">utløseren
    <span id="popup" role="tooltip">og denne tilleggsteksten gir ekstra kontekst</span></a>.
    Tekst og popup er <strong>i en lenke (a).</strong></p>

    CSS av eksempel 1

    [role="tooltip"] {
    display: none;
    padding: 0.5em;
    background:white;
    color: black;
    border:solid black 2px;
    width:10em;
    }

    .a-and-tooltip {
    position: relative;
    }

    [role="tooltip"] {
    position: absolute;
    left:0;
    top:1em;
    }

    Eksempel på feil

    Det ekstra innholdet er ikke mulig å enten avvise, bruke med mouseover, eller er ikke vedvarende. Det vil si at et eller flere av vilkårene over ikke er ivaretatt.

    Kommentar

    Kravet gjelder kun der denne typen ekstra innhold blir synlig. Merk at det finnes vanligvis mer forutsigbare og tilgjengelige måter å vise ekstra innhold på en nettside, som vi anbefaler innholdsprodusenter å ta i bruk.