Gör det möjligt att hoppa förbi återkommande innehåll

Om riktlinjen

  • EN 9.2.4.1
  • WCAG 2.4.1 (A)

För att underlätta för personer som lyssnar på en webbsida med skärmläsare eller för de som använder tangentbord för att navigera, ska det gå att hoppa över återkommande innehåll som exempelvis menyer i sidhuvudet. Då slipper de höra eller tabba förbi samma sak varje gång de kommer till en ny sida på samma webbplats.

Därför ska det gå att hoppa över återkommande innehåll

För personer som lyssnar på innehåll med skärmläsare, eller som använder tangentbord eller något annat hjälpmedel för att navigera, kan det ta lång tid att komma förbi exempelvis en meny med många länkar.

När samma innehåll dessutom återkommer på flera ställen måste samma rörelse, exempelvis tryck på tangenten Tabb, upprepas om och om igen vilket kan vara tröttande och orsaka smärta.

Därför ska det alltid finnas möjlighet att hoppa förbi sådant upprepat innehåll.

Vad kräver lagen?

Låt en "skipplänk" vara första interaktiva elementet

Det ska finnas mekanismer för att hoppa över grupper av innehåll som återkommer på flera webbsidor inom en webbplats.

För att uppfylla kravet krävs (enligt Diggs tolkning) att en webbplats använder så kallade ”skipplänkar”, det vill säga länkar som ger användaren möjlighet att hoppa över återkommande innehåll.

På enklare webbplatser kan det räcka med att det finns en skipplänk för att hoppa över sidhuvudet och komma direkt till huvudinnehållet. Skipplänken ska ligga som det första interaktiva elementet.

Exempel: Diggs skipplänk

Nedan visas ett exempel på en skipplänk på Diggs webbplats. Denna länk visas som första interaktiva element när en person använder Tabb för att navigera på webbplatsen. Skipplänken blir också synlig om stilmallar stängs av.

Första interaktiva elementet på Diggs webbplats är en skipplänk som heter Till innehållet
Skipplänken Till innehållet är första interaktiva elementet på Diggs webbplats även när stillmallar stängts av.

Rekommendationer utöver lagkrav

Utöver det lagen kräver finns tips och rekommendationer för hur du kan arbeta med navigering och skipplänkar för att förbättra digital tillgänglighet:

Använd h-element för snabbare navigering

  1. Skapa rubriker med h-element.
  2. Se till att rubrikstrukturen är korrekt.

Detta hjälper främst användare med skärmläsare, som kan snabbnavigera med hjälp av sidans rubriker. Om det finns rubriker som seende personer inte är i behov av är det möjligt att dölja dessa visuellt så att de bara presenteras för hjälpmedel.

Underlätta navigering med landmärken

För de delar av webbsidor som är allra vanligast bör du använda de struktur-element som erbjuds i HTML5, eller i andra hand (om sajten exempelvis inte använder HTML5) motsvarande attribut i ARIA. Då kan den som använder enkelt hoppa mellan dessa så kallade landmärken.

Strukturkod och ARIA-attribut

Funktion/del av sida

HTML5 strukturelement (med exempel)

ARIA-attribut

Sidhuvud/beskrivning av webbplatsen

<header>

role="banner"

Sökfunktion

Saknas

role="search"

Navigation/meny (kan finnas flera)

<nav aria-label=”huvudmeny”>

role=”navigation”

Huvudinnehåll

<main>

role=”main”

Andra delar som står för sig själv. Exempelvis en puff som informerar om annan sida, eller en ruta med fristående information. Kan finnas flera

<aside>

role=”complementary”

Formulär (ej sökfunktion, se ovan).

<form aria-label=”anmälningsformulär”>

role=”form”

Sidfot/beskrivning av sidans huvudinnehåll, exempelvis upphovsrätt, användarvillkor

<footer>

role=”contentinfo”

Landmärke som används för att identifiera regioner på en sida. (kan finnas flera, men använd bara för delar som är så viktiga att de behöver finnas i sidnavigation)

<section aria-labelledby=”region1″>
<h2 id=”region1″>rubrik för region 1</h2>
… Innehåll för region 1…
</section>

role=”region”


Så testar du skipplänkar

Kontrollera att skipplänkar fungerar genom att använda dem. Om inga genvägar är synliga, börja navigera på sidan med hjälp av Tabb på tangentbordet. Eventuella skipplänkar bör då visas.

Om du stänger av stilmallar (CSS) på webbplatsen ska skipplänken också visas.

Utdrag ur WCAG

WCAG 2.4.1 (A) Hoppa över grupperat innehåll

En metod/funktion finns tillgänglig för att hoppa över grupperat innehåll som upprepas på flera webbsidor.

Därför länkar vi till WCAG på svenska och engelska

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Senast uppdaterad: