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

Om riktlinjen

Innehåller lagkrav
EN 9.2.4.1
WCAG 2.4.1 (A)

Område

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

Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:

Använd h-element för snabbare navigering

Skapa rubriker med h-element.
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.

Översikt över strukturkod och ARIA-attribut

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.