Kontroller innhold som dukker opp ved hover og fokus (WCAG 1.4.13)

Tooltips, dropdown-menyer og popups som vises når du holder musepekeren over et element - de finnes overalt på nettet. Men for mange brukere er de en kilde til frustrasjon: innholdet forsvinner når du prøver å lese det, det dekker over viktig informasjon, eller det kan ikke lukkes uten å flytte fokus. WCAG 1.4.13 setter klare regler for hvordan slikt innhold skal oppføre seg.

Hva sier kravet?

WCAG 1.4.13 Pekerfølsomt innhold eller tastaturfokus (Content on Hover or Focus) gjelder innhold som blir synlig når brukeren holder musepekeren over et element (hover) eller setter tastaturfokus på det. Kravet stiller tre krav til slikt innhold:

Lukkbart (Dismissible): Brukeren skal kunne lukke innholdet uten å flytte pekeren eller tastaturfokus - typisk med Escape-tasten. Unntaket er hvis innholdet varsler om en feil eller ikke dekker over annet innhold.
Pekervennlig (Hoverable): Hvis innholdet vises ved hover, skal brukeren kunne flytte musepekeren over til det nye innholdet uten at det forsvinner. Du skal altså kunne bevege musen fra trigger-elementet til tooltip-en for å lese den.
Vedvarende (Persistent): Innholdet skal forbli synlig til brukeren aktivt lukker det, flytter pekeren bort, eller fjerner fokus. Det skal ikke forsvinne av seg selv etter en tidsforsinkelse.

Kravet er nivå AA. Det ble introdusert med WCAG 2.1 og adresserer et problem som har plaget nettbrukere i årevis - spesielt de som bruker forstørring.

Hvorfor er dette viktig?

Forstørringsbrukere

Brukere som bruker skjermforstørring ser bare en liten del av skjermen om gangen. Når en tooltip eller popup dukker opp, kan de trenge å flytte visningsområdet for å lese den. Hvis innholdet forsvinner så snart pekeren forlater trigger-elementet, rekker de aldri å lese det.

Skjermleserbrukere

Innhold som vises ved hover men ikke ved tastaturfokus, er utilgjengelig for brukere som navigerer med tastatur eller skjermleser. Kravet sikrer at innholdet også vises ved fokus.

Motoriske utfordringer

Brukere med skjelvende hender eller nedsatt motorikk kan ha vanskeligheter med å holde pekeren helt stille. Hvis innholdet forsvinner ved den minste bevegelse, er det praktisk talt utilgjengelig for disse brukerne.

Kognitive utfordringer

Innhold som forsvinner etter kort tid gir ikke brukere med lesevanker tilstrekkelig tid til å oppfatte og forstå informasjonen.

Slik oppfyller du kravet

Tooltip som oppfyller alle tre krav

Her er et eksempel på en tilgjengelig tooltip implementert med HTML, CSS og JavaScript:

<div class="tooltip-wrapper">
  <button aria-describedby="hjelp-tooltip"
          class="tooltip-trigger">
    Hva betyr dette?
  </button>
  <div id="hjelp-tooltip" role="tooltip" class="tooltip">
    Universell utforming betyr at digitale løsninger skal
    fungere for alle, uavhengig av funksjonsevne.
  </div>
</div>

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  max-width: 300px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Vis ved hover på wrapper (hoverable) */
.tooltip-wrapper:hover .tooltip,
/* Vis ved fokus på trigger (tastaturtilgjengelig) */
.tooltip-trigger:focus + .tooltip {
  display: block;
}

/* La tooltip forbli synlig når pekeren er over den */
.tooltip:hover {
  display: block;
}

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    // Lukkbart: Escape fjerner fokus og skjuler tooltip
    document.activeElement.blur();
  }
});

Dropdown-menyer

Dropdown-menyer er et av de vanligste elementene der dette kravet gjelder. Sørg for at menyen:

.nav-item {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Vis ved hover - inkluder hele dropdown-området */
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  display: block;
}

Legg merke til :focus-within - dette sørger for at dropdown-en også vises når et element inni den har tastaturfokus. Det er avgjørende for tastaturnavigasjon.

Unngå forsinkelser og tidsbegrensninger

Ikke la innhold forsvinne automatisk etter en viss tid. Mange implementasjoner bruker setTimeout for å skjule tooltips etter noen sekunder - dette bryter kravet:

// Dårlig: Tooltip forsvinner etter 3 sekunder
element.addEventListener("mouseenter", () => {
  tooltip.style.display = "block";
  setTimeout(() => {
    tooltip.style.display = "none";
  }, 3000);
});

// Bra: Tooltip forblir til brukeren aktivt forlater
element.addEventListener("mouseenter", () => {
  tooltip.style.display = "block";
});

element.addEventListener("mouseleave", (e) => {
  // Sjekk om pekeren flyttet til tooltip-en selv
  if (!tooltip.contains(e.relatedTarget)) {
    tooltip.style.display = "none";
  }
});

Sørg for at overlay ikke blokkerer innhold

Innhold som dukker opp ved hover, skal ikke permanent blokkere annet innhold. Brukeren må kunne lukke det - typisk med Escape:

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    const synligeTooltips =
      document.querySelectorAll('.tooltip[style*="display: block"]');
    synligeTooltips.forEach((t) => {
      t.style.display = "none";
    });
  }
});

Test grundig

Sjekk disse scenarioene:

Hover-test: Hold musepekeren over trigger-elementet, flytt deretter pekeren til innholdet som dukker opp. Forsvinner det? Da er det et problem.
Escape-test: Få innholdet til å vises, og trykk Escape. Forsvinner det? Bra.
Tastatur-test: Naviger til trigger-elementet med Tab. Vises det samme innholdet som ved hover? Hvis ikke, mangler tastaturtilgjengelighet.
Persistens-test: La innholdet stå synlig i 30 sekunder uten å gjøre noe. Forsvinner det av seg selv? Da bryter det kravet.

Vanlige feil

Tooltips som forsvinner når pekeren flyttes mot dem - det er ikke mulig å lese innholdet fordi det forsvinner underveis.
Innhold som bare vises ved hover, ikke ved tastaturfokus - utilgjengelig for tastaturbrukere.
Ingen Escape-funksjonalitet - brukeren kan ikke lukke innholdet uten å flytte pekeren.
Tidsforsinkelse som skjuler innhold - tooltips som forsvinner etter noen sekunder, uten at brukeren har bedt om det.
Modale elementer som trigger ved hover - store popups som dekker innhold og ikke kan lukkes enkelt.
title-attributt brukt som tooltip - nettleserens innebygde title-tooltip oppfyller sjelden kravene og er ikke tilgjengelig for tastaturbrukere.

Godt designet pekerfølsomt innhold handler om respekt for brukeren: la dem lese i sitt eget tempo, gi dem kontroll over hva som vises, og sørg for at det fungerer uansett om de bruker mus, tastatur eller berøringsskjerm.