Innehåll vid hovring eller fokus: tooltips och megamenyer

29 oktober 2026

Verktygstips, megamenyer, snabbvy och storleksguide: så uppfyller du kraven på att innehåll vid hovring eller fokus går att stänga, hovra och läsa.

Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om Lag (2023:254) om vissa produkters och tjänsters tillgänglighet, vänd dig till Post- och telestyrelsen (PTS).

I en webbutik dyker det upp rutor när man för pekaren över något eller tabbar till det: ett verktygstips vid en infoikon, en megameny, en snabbvy på produktkortet, en storleksguide. Kunden som förstorar sidan eller har en stor muspekare kan då få en ruta över just det som kunden försöker nå. Den försvinner när pekaren flyttas mot den, eller så går den inte att stänga. Kriteriet Innehåll vid hover eller fokus (1.4.13) handlar om det här. Guiden går igenom fyra mönster med kod före och efter och ett eget test för varje. Punkten finns i checklistans grupp Hela butiken.

Vad kriteriet kräver

W3C säger att innehåll som visas och försvinner i samband med hovring eller tangentbordsfokus ofta ger problem: kunden kanske inte menade att utlösa det, vet inte att det kom upp, eller får det i vägen för det kunden ska göra. Det finns oftast mer förutsägbara sätt att lägga till innehåll på en sida, och W3C rekommenderar dem. Väljer du ändå hovring eller fokus ska tre villkor vara uppfyllda:

Dismissible, går att stänga: innehållet går att stänga utan att pekaren eller fokus flyttas, till exempel med Esc. Förstoringsprogram följer pekaren eller fokus, så en ruta som ligger över sidan kan annars inte komma undan.
Hoverable, går att hovra: pekaren ska kunna flyttas från utlösaren till det nya innehållet utan att det försvinner. Det behövs när innehållet är stort och måste panoreras, eller när en stor muspekare skymmer det.
Persistent, står kvar: innehållet ska stå kvar tills kunden tar bort hovring eller fokus från både utlösaren och innehållet, stänger det, eller informationen inte längre gäller.

Det finns undantag. Villkoret om att kunna stänga gäller inte felmeddelanden som visas för att ett fält är fel ifyllt, och inte innehåll som bara ligger över tomma ytor eller ren dekor. Kriteriet gäller inte heller sådant som webbläsaren själv visar, och W3C nämner title-attributet som exempel. Modala dialoger ligger utanför eftersom de ska ta fokus och därför inte ska öppnas av hovring eller fokus. Innehåll som visas vid hovring bör också gå att visa med tangentbordsfokus. W3C hänvisar där till kriteriet Tangentbord.

Verktygstips vid ikoner

Det vanligaste mönstret är en infoikon eller ett frågetecken intill ett pris, en frakttid eller ett fält. Här bygger vi tipset så att det uppfyller alla tre villkoren. W3C:s mönster för verktygstips (Tooltip i WAI-ARIA Authoring Practices) säger att tipset stängs med Esc, att fokus stannar på utlösaren och att utlösaren pekar på tipset med aria-describedby, medan tipset har role tooltip. Mönstret är markerat som pågående arbete utan full enighet i W3C:s arbetsgrupp, så läs det som en riktning och inte som en standard.

Före, där tipset ligger en bit från ikonen och försvinner när pekaren lämnar ikonen:

<span class="tips-ikon" onmouseleave="this.nextElementSibling.hidden = true"
      onmouseenter="this.nextElementSibling.hidden = false">?</span>
<div class="tips-ruta" hidden style="margin-top: 12px">Fraktfritt över 995 kr.</div>

Ikonen är ett span, så den går inte att nå med tangentbord, och glappet på 12 pixlar gör att tipset stängs innan pekaren hunnit fram.

Efter:

<span class="tips">
  <button type="button" class="tips-knapp" aria-describedby="tips-frakt">Om frakten</button>
  <span id="tips-frakt" role="tooltip" class="tips-text">Fraktfritt över 995 kr.</span>
</span>

.tips { position: relative; display: inline-block; }
.tips-text { display: none; position: absolute; top: 100%; left: 0; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid #333; }
.tips:hover .tips-text,
.tips:focus-within .tips-text { display: block; }
.tips.stangd .tips-text { display: none; }

document.querySelectorAll(".tips").forEach((tips) => {
  const oppna = () => tips.classList.remove("stangd");
  tips.addEventListener("mouseleave", oppna);
  tips.addEventListener("focusout", oppna);
});
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    document.querySelectorAll(".tips").forEach((tips) => tips.classList.add("stangd"));
  }
});

Tipset ligger inuti samma element som knappen och ligger an mot den, så pekaren kan gå från knappen till rutan utan att lämna elementet (går att hovra). Det visas så länge hovring eller fokus finns kvar (står kvar). Esc döljer det utan att fokus flyttas (går att stänga), och nästa gång kunden hovrar eller tabbar dit visas det igen.

Om title-attributet: W3C undantar det eftersom webbläsaren styr hur det visas. Det betyder att kriteriet inte kan underkänna det, men det betyder inte att det fungerar för alla. Hur och om title visas för tangentbords- och pekskärmsanvändare skiljer sig mellan webbläsare och enheter. Pröva själv i de webbläsare dina kunder använder, och lägg viktig information som frakt och retur i sidans text i stället för enbart i en title.

Så testar du: för muspekaren över ikonen och flytta den sedan rakt in på rutan. Rutan ska stå kvar. Tryck Esc medan pekaren ligger kvar: rutan ska försvinna. Tabba dit med tangentbordet och gör samma sak.

Megameny som öppnas vid hovring

En megameny som öppnas när pekaren är över en menypost täcker ofta stora delar av sidan. Tre fel är vanliga. Menyn stängs i glappet mellan menyraden och panelen (går inte att hovra). Den går inte att stänga med Esc. Och den öppnas inte alls för den som bara använder tangentbord. W3C kopplar det till kriteriet Tangentbord (2.1.1) på sidan om 1.4.13: det som går att utlösa med hovring ska också gå att utlösa med fokus.

Före, där menyposten är en länk utan kontroll och panelen stängs när pekaren lämnar länken:

<li class="meny">
  <a href="/dam" onmouseenter="visa('dam')" onmouseleave="dolj('dam')">Dam</a>
  <ul id="dam" hidden>...</ul>
</li>

Efter, med en knapp som visar läget och en panel som ligger i samma element som knappen:

<li class="meny">
  <button type="button" aria-expanded="false" aria-controls="dam">Dam</button>
  <ul id="dam" hidden>
    <li><a href="/dam/jackor">Jackor</a></li>
    <li><a href="/dam/skor">Skor</a></li>
  </ul>
</li>

document.querySelectorAll(".meny").forEach((post) => {
  const knapp = post.querySelector("button");
  const panel = document.getElementById(knapp.getAttribute("aria-controls"));
  const satt = (oppen) => {
    knapp.setAttribute("aria-expanded", String(oppen));
    panel.hidden = oppen === false;
  };
  knapp.addEventListener("click", () => satt(panel.hidden));
  post.addEventListener("mouseenter", () => satt(true));
  post.addEventListener("mouseleave", () => satt(false));
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && panel.hidden === false) {
      if (post.contains(document.activeElement)) knapp.focus();
      satt(false);
    }
  });
});

Knappen med aria-expanded gör att läget går att läsa av (kriteriet Namn, roll, värde nämner att tillstånd som utfälld eller hopfälld ska kunna avläsas av hjälpmedel). Klick och Enter öppnar panelen för tangentbordsanvändaren, och Esc stänger den. Esc lyssnas på hela sidan, så panelen stängs även när kunden bara hovrar och fokus ligger någon annanstans. Ligger fokus i panelen flyttas det tillbaka till knappen.

Så testar du: för pekaren från menyposten rakt ner på panelen. Panelen ska stå kvar. Tryck Esc: panelen ska stängas. Tabba till menyposten och öppna den med Enter.

Snabbvy och storleksguide

En snabbvy som öppnas när pekaren är över ett produktkort eller en storleksguide som poppar upp vid hovring döljer ofta kortet bredvid, och den går att förlora genom en liten rörelse. Det enklaste är att inte låta hovring öppna den. En knapp som kunden trycker på är ett mer förutsägbart sätt att lägga till innehåll, och då är det kunden som väljer när rutan visas. Det är vår bedömning och inte ett uttryckligt krav i W3C:s text. Vill du ändå öppna vid hovring gäller de tre villkoren, och rutan får inte skymma något som kunden behöver se.

Rutan ska ha en stängknapp med namn. Kontrollen behöver ett namn som skärmläsare kan läsa, och en knapp med bara ett kryss som ikon har det inte. Skriv ordet Stäng i knappen.

<button type="button" aria-expanded="false" aria-controls="storlek">Storleksguide</button>
<div id="storlek" role="dialog" aria-label="Storleksguide" hidden>
  <p>Mät runt bröstkorgens bredaste del och jämför med tabellen.</p>
  <button type="button" class="stang">Stäng</button>
</div>

W3C:s tooltip-mönster säger att en ruta som innehåller fokuserbara element, som en stängknapp, kan byggas som en icke modal dialog och inte som ett verktygstips. En sådan ruta tar inte över hela sidan. Låt stängknappen stänga den, och lägg till samma Esc-lyssnare som i exemplen ovan.

Så testar du: öppna rutan och försök läsa den med webbläsaren förstorad till 200 procent. Rutan ska gå att nå i sin helhet utan att den stängs. Den ska gå att stänga med både Esc och knappen, och ingenting du behöver se ska ligga dolt bakom den.

Information vid fokus i kassan

I kassan förklarar små ikoner ofta vad ett fält vill ha: varför vi frågar efter telefonnummer, vad en CVC-kod är. Då visas texten när fältet får fokus. Samma tre villkor gäller. Texten ska gå att stänga med Esc och inte försvinna efter några sekunder. Den bör inte heller skymma fältet bredvid.

<label for="postnr">Postnummer</label>
<input id="postnr" name="postnr" aria-describedby="postnr-hjalp">
<p id="postnr-hjalp" role="tooltip" class="falt-hjalp">Fem siffror, till exempel 411 05.</p>

Lägg hjälptexten under fältet, där den inte skymmer något, och visa den med CSS för fokus. Är hjälptexten viktig för att fylla i fältet rätt är det bättre att visa den hela tiden. Felmeddelanden som visas för att ett fält är fel ifyllt är undantagna från kravet på att kunna stängas, men de bör ändå vara tydliga och ligga kvar tills felet är rättat. Mer om det i guiden Formulär och felmeddelanden i kassan.

Så testar du: tabba till fältet, läs texten, tryck Esc och se att den försvinner utan att fokus flyttas. Tabba bort och tillbaka: texten ska komma tillbaka.

Vad AccessAudit kontrollerar

Det gratis testet på butik.nightwave.se/tillganglighet läser sidornas källkod och provar inte hovring. Månadsgranskningen har ingen kontroll för 1.4.13. axe-core, som granskningen bygger på, har ingen regel för kriteriet, och våra egna kontroller prövar inte rutor som visas vid hovring eller fokus. Det som ligger närmast är kontrastkontrollen: på några sidor av varje typ, och alltid i varukorg och kassa, mäter den kontrasten på upp till åtta länkar och knappar när pekaren är över dem och när de har fokus. Den gäller färgerna och inte om en ruta går att stänga eller hovra. Hovring och Esc måste du alltså pröva själv. Checklistans punkt om hovring markeras därför som ett eget test.

Det här är teknisk vägledning och inte juridisk rådgivning. Frågor om hur lagen ska tolkas i ditt fall ställer du till PTS.

Källor

Alla källor lästa 2026-10-28.