Hoppgenväg

En hoppgenväg är en tangentbordsgenväg längst upp på varje sida som låter användare hoppa förbi upprepad navigering direkt till huvudinnehållet. Den uppfyller WCAG 2.4.1 Bypass Blocks (Nivå A) och är en av de billigaste tillgänglighetsförbättringarna som finns.

Varför den finns

Tänk på en typisk innehållssajt. Rubriken har sex toppnivålänkar, en språkväljare och en temaväxlare. Sidfoten har ytterligare tolv. Varje sida upprepar dessa strukturer. En tangentbords- eller skärmläsaranvändare som landar på en artikel och vill läsa den måste tabba igenom ungefär trettio interaktiva element innan de når artikelns brödtext. Multiplicerat över varje sidnavigering blir det uttröttande.

En hoppgenväg är ett enda <a href="#main-content">Hoppa till innehåll</a> placerat som det första fokusbara elementet i dokumentet. Användaren trycker Tab en gång efter sidladdning, ser “Hoppa till innehåll,” trycker Enter och fokus flyttas till artikelns brödtext.

Implementering

Mönstret är litet men har några välkända fallgropar:

<a class="skip-link" href="#main-content">Hoppa till innehåll</a>
...
<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

Tre detaljer som spelar roll:

1. Länken måste vara synlig vid fokus. En hoppgenväg som permanent är display: none är osynlig för seende tangentbordsanvändare, som då inte vet att den finns. Dölj den utanför skärmen via positionering, inte via display: none eller visibility: hidden.

2. Målet måste ta emot fokus. Ett bart <main> tar inte tangentbordsfokus som standard. Att lägga till tabindex="-1" gör det programmatiskt fokuserbart så att webbläsaren faktiskt flyttar fokus när länken följs. Utan detta ändras URL-hashen men fokus flyttas inte, och nästa Tab startar om från sidans topp — vilket omintetgör hela syftet med hoppgenvägen.

3. Den måste vara det första fokusbara elementet. Inte “bland de första 100 elementen” — det första. Om något föregår den (en logolänk, en sökikon) måste användaren tabba förbi dessa innan hoppgenvägen nås, vilket motverkar syftet.

Flera hoppgenvägar

Långa sidor med flera upprepade regioner kan dra nytta av en liten “hoppa”-meny i stället för en enda länk:

• Hoppa till huvudinnehåll
• Hoppa till navigering
• Hoppa till sidfot

En kort synlig-vid-fokus-lista med tre eller fyra destinationer fungerar bra. En lång autogenererad innehållsförteckning längst upp på varje sida gör det inte.

Vad den inte ersätter

En hoppgenväg är säkerhetsnätet för att kringgå block. Den ersätter inte korrekta landmärken (<nav>, <main>, <aside>, <footer>), korrekt rubrikstruktur (en <h1> per sida, hierarkiska <h2>:or), eller ARIA aria-label på duplicerade landmärken. Skärmläsaranvändare förflyttar sig mellan regioner och rubriker via tangentbordsgenvägar som är beroende av att dessa strukturer finns på plats; hoppgenvägen är för seende tangentbordsanvändare.