WCAG 1.4.13 Innehåll vid hover eller fokus

Innehåll som visas när muspekaren är över något, eller när något får fokus, ska uppfylla tre villkor. Det ska gå att stänga utan att flytta pekaren eller fokus, oftast med Esc. Det ska gå att flytta pekaren till det nya innehållet utan att det försvinner. Och det ska stå kvar tills kunden flyttar pekaren eller fokus, eller stänger det. Den som använder förstoring ser bara en del av skärmen och behöver kunna flytta sig till det som dök upp.

• Megamenyn stängs när pekaren passerar ett glapp mellan menyraden och undermenyn.
• En förhandsvisning av varukorgen öppnas vid hovring och täcker sidan utan att gå att stänga med Esc.
• Hjälptexter för storlek eller frakt försvinner efter några sekunder.
• Snabbvyn av en produkt i produktlistan öppnas vid hovring och döljer produkten bredvid.
• Verktygstips som bara är ett title-attribut, som inte går att flytta pekaren till eller stänga.

Låt undermenyn och det som visas ligga i samma element som det som öppnar det, utan glapp, och stäng det med Esc. Låt det stå kvar tills kunden går därifrån.

<li class="meny">
  <button aria-expanded="false" aria-controls="dam">Dam</button>
  <ul id="dam" hidden>...</ul>
</li>

<script>
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") stangOppnaMenyer();
  });
</script>

Kontrollera själv

Ingen av de automatiska kontrollerna provar innehåll som visas vid hovring. För muspekaren över menyn och andra element som visar något, tryck Esc, och flytta pekaren in i det som dök upp. Gör samma sak med Tab för det som visas vid fokus.

• Understanding 1.4.13 Content on Hover or Focus hos W3C (på engelska)
• Kravet i Diggs webbriktlinjer

Kravet 1.4.13 är nytt i WCAG 2.1 och finns inte i W3C:s svenska översättning, som gäller WCAG 2.0. Det svenska namnet kommer därför från Diggs webbriktlinjer.