Begreber

Spring-over-link

Se også: skip to content, skip nav

En tastaturgenvej øverst på siden, der lader brugere springe gentagen navigation over og gå direkte til hovedindholdet. Påkrævet for WCAG 2.4.1 Bypass Blocks.

En spring-over-link er en tastaturgenvej øverst på siden, der lader brugere springe gentagen navigation over og gå direkte til hovedindholdet. Den opfylder WCAG 2.4.1 Bypass Blocks (niveau A) og er en af de billigste tilgængeligheds­forbedringer, man kan foretage.

Hvorfor den findes

Forestil dig et typisk indholds­website. Headeren har seks navigationselementer på øverste niveau, en sprog­vælger og en tema­skifter. Footeren har yderligere tolv. Alle sider gentager disse strukturer. En tastatur- eller skærmlæser-bruger, der lander på en artikel og vil læse den, skal tabbe igennem ca. tredive interaktive elementer, inden vedkommende når artiklens indhold. Ganget med alle sidenavigationer er det udmattende.

En spring-over-link er et enkelt <a href="#main-content">Gå til indhold</a> placeret som det første fokuserbare element i dokumentet. Brugeren trykker Tab én gang efter sideindlæsning, ser “Gå til indhold”, trykker Enter, og fokus flyttes til artiklens indhold.

Implementering

Mønsteret er lille, men har et par velkendte faldgruber:

<a class="skip-link" href="#main-content">Gå til indhold</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, der er vigtige:

  1. Linket skal være synligt ved fokus. En spring-over-link, der permanent er display: none, er usynlig for seende tastaturbrugere, som dermed ikke ved, at den eksisterer. Skjul den offscreen via positionering — ikke via display: none eller visibility: hidden.

  2. Målet skal kunne modtage fokus. Et bart <main> tager ikke tastatur­fokus som standard. Ved at tilføje tabindex="-1" gøres elementet programmatisk fokuserbart, så browseren faktisk flytter fokus, når linket følges. Uden dette ændres URL-hashen, men fokus flyttes ikke, og næste Tab genstarter fra toppen af siden — og underminerer hele formålet med spring-over-linket.

  3. Det skal være det første fokuserbare element. Ikke “blandt de første 100 elementer” — første. Hvis noget kommer forud for det (et logo-link, et søgeikon), skal brugeren tabbe forbi dem, inden vedkommende når spring-over-linket, og så er formålet forspildt.

Lange sider med flere gentagne regioner kan have gavn af en lille “spring over”-menu i stedet for ét enkelt link:

  • Gå til hovedindhold
  • Gå til navigation
  • Gå til footer

En kort, synlig-ved-fokus liste med tre eller fire destinationer er fin. En lang, auto-genereret indholdsfortegnelse øverst på alle sider er det ikke.

Hvad den ikke erstatter

En spring-over-link er bypass-blocks-sikkerhedsnettet. Den erstatter ikke korrekte landmarks (<nav>, <main>, <aside>, <footer>), korrekt overskriftsstruktur (ét <h1> pr. side, hierarkiske <h2>er) eller ARIA aria-label på duplikerede landmarks. Skærmlæser-brugere navigerer mellem regioner og overskrifter via tastaturgenveje, der afhænger af, at disse strukturer er på plads; spring-over-linket er til tastatur-kun seende brugere.