SC 2.4.1 Nivå A WCAG 2.0

Hoppa förbi block

Erbjud tangentbords- och skärmläsaranvändare ett sätt att hoppa förbi innehåll som upprepas på varje sida — vanligtvis sidhuvudet, primärnavigeringen och hjälplänkar — så att de kan nå huvudinnehållet utan att tabba igenom dussintals länkar.

Vad kriteriet kräver

Om samma innehållsblock finns på flera sidor — sidhuvud, primärnavigering, megameny, brödsmulefält, hjälplänkar — hoppar seende musanvändare förbi det direkt. Tangentbordsanvändare måste tabba igenom det varje gång. Skärmläsaranvändare måste lyssna på det. Kriteriet kräver minst en mekanism som låter användare hoppa direkt till huvudinnehållet.

WCAG godkänner flera mekanismer: en “hoppa till huvudinnehållet”-länk, korrekta landmärken (<header>, <nav>, <main>, <footer>), eller en verklig rubrikhierarki som skärmläsaranvändare kan navigera med H-tangenten. I praktiken är en hoppa-länk plus landmärken det säkra baslinjeläget.

Hur du uppfyller det

Lägg till en “Hoppa till huvudinnehållet”-länk som det första fokusbara elementet på sidan. Gör den synlig vid fokus, inte permanent dold.
Peka hoppa-länkens href mot id:t på ditt <main>-element och lägg till tabindex="-1" på <main> så att fokusringen landar där i Safari.
Använd riktiga landmarkselement: ett <header>, ett <nav> (eller flera med aria-label), ett <main>, ett <footer> per sida.
Använd en ren rubrikstruktur så att JAWS- och NVDA-användare kan trycka H, 1, 2, 3 för att hoppa.
Om du har flera upprepade block (hjälpnavigering + primärnavigering + brödsmulor) kan du överväga en andra hoppa-länk för det mest besvärliga.

Vanliga fel

Hoppa-länk dold med display: none istället för att placeras utanför skärmen och visas vid fokus — hjälpmedelsteknik hittar den inte.
Hoppa-länkens mål saknar tabindex="-1", så Safari/WebKit ignorerar hoppet och behåller fokus på hoppa-länken.
<main> inbäddad inuti <nav> eller duplicerad flera gånger på sidan.
Rubrikhierarki som hoppar nivåer (h1 → h4) eller använder rubriker enbart för visuell storlek, vilket bryter H-tangentnavigeringsstrategin.
Klistriga sidhuvuden som överlappar det fokuserade elementet efter att hoppa-länken aktiveras — se 2.4.11.

Varför det spelar roll

Hoppa förbi block är den billigaste tillgänglighetslösningen på listan — en hoppa-länk är ungefär 10 rader HTML och CSS — men felfrekvensen på produktionssajter är fortfarande runt 60 % i WebAIMs årliga Million-skanning. För en ren tangentbordsanvändare som navigerar en sajt med en 40-posters megameny är det utmattande att behöva tabba igenom den vid varje sidbyte och, vid långa surfingssessioner, handikappande.