Hva kreves i praksis?
Brukere skal kunne hoppe over gjentatt innhold som meny og header, typisk med en «Hopp til innhold»-lenke og et main-landemerke. Kravet gjelder sider som brukes i Norge, uavhengig av om du er offentlig virksomhet, butikk eller byrå som leverer nettsiden.
Vanlige feil og avvik
- Ingen skip-lenke, og headeren har 20 Tab-stopp før innholdet.
- Skip-lenke som peker på en id som ikke finnes.
- Skip-lenke som er usynlig også når den har fokus.
Før og etter — kodeeksempler
Eksemplene er forenklet. Lim inn mønsteret, ikke nødvendigvis klassenavnene, i din egen kodebase.
Feil kode — bryter WCAG
Ingen måte å hoppe over menyen. main mangler, så landemerkenavigasjon feiler også.
Feil eksempel
<header><!-- 12 lenker --></header>
<div class="innhold">Artikkelen starter her</div>Riktig kode — utbedret
Skip-lenken blir synlig ved fokus og lander i main. main har id som lenken peker på.
Riktig eksempel
<a href="#hovedinnhold" class="sr-only focus:not-sr-only">Hopp til innhold</a>
<header><!-- meny --></header>
<main id="hovedinnhold" tabindex="-1">
<h1>Artikkelen</h1>
</main>Hvordan UUvakta tester dette
Axe-regelen bypass slår ut når siden mangler skip-lenke og tilstrekkelige landemerker. UUvakta varsler per URL og kan på WordPress legge inn hopp-lenke via Companion. Sjekk selv at lenken blir synlig ved fokus.