WCAG 2.4.1 Hoppa över grupperat innehåll

Det ska finnas ett sätt att hoppa förbi det som upprepas på varje sida, som sidhuvud, meny och kampanjrad. Webbutiker har ofta en stor meny med många kategorier, och utan en hopplänk måste den som använder tangentbord trycka sig igenom hela menyn på varje produktsida. Rubriker och ett main-element hjälper skärmläsare, men för den som bara använder tangentbordet är en hopplänk det säkraste.

• Det finns ingen hopplänk alls, så att det krävs tiotals tryck på Tab för att nå produkten.
• Hopplänken finns men pekar på ett id som inte finns på sidan.
• Hopplänken är dold med display: none och går därför inte att nå med Tab.
• Hopplänken ligger efter cookierutan och kampanjraden i stället för först på sidan.
• Sidans innehåll saknar main-element, så att skärmläsare inte kan hoppa dit.

Lägg en länk först i body som pekar på main. Den kan vara dold tills den får fokus, men inte med display: none.

<body>
  <a class="hoppa" href="#innehall">Hoppa till innehållet</a>
  <header>...</header>
  <main id="innehall" tabindex="-1">...</main>
</body>

.hoppa { position: absolute; left: -9999px; }
.hoppa:focus { left: 1rem; top: 1rem; }

Gratistestet

Gratistestet letar efter det här i källkoden:

• Det finns ingen länk för att hoppa förbi menyn till innehållet, och inget main-element.
• Det finns ingen länk för att hoppa förbi menyn. Den som använder tangentbord måste gå igenom hela menyn på varje sida.

Månadsgranskningen kör dessutom axe-core, som kontrollerar att sidan har ett sätt att hoppa förbi upprepat innehåll. Att länken syns när den får fokus, och att den faktiskt flyttar dig till innehållet, provar du själv med Tab.

• Understanding 2.4.1 Bypass Blocks hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Det svenska namnet kommer från W3C:s auktoriserade svenska översättning, som gäller WCAG 2.0. Kravet 2.4.1 har samma lydelse i WCAG 2.1.