JumpToMainContent

Kildekode på GitHub · Les som Markdown

En «hopp til hovedinnhold»-lenke som er usynlig til den mottar fokus via Tab-tasten. Dette er et viktig tilgjengelighetsmønster som lar tastaturbrukere og skjermleserbrukere hoppe over repeterende navigasjon og gå rett til sidens hovedinnhold.

Utforsk

Hopp til hovedinnhold

children

targetId

<JumpToMainContent targetId="#main" style="[object Object]">Hopp til hovedinnhold</JumpToMainContent>

Importering

import { JumpToMainContent } from "@kilden/designsystem";

Grunnleggende bruk

Plassér komponenten som det aller første elementet i <body>, og gi hovedinnholdet en matchende id:

<body>
  <JumpToMainContent />
  <header>...</header>
  <main id="main">Hovedinnhold her</main>
</body>

Komponenten er helt usynlig — trykk Tab for å se den.

Egendefinert mål

Du kan peke lenken til et annet element enn #main:

<JumpToMainContent targetId="#content" />

Egendefinert tekst

Standardteksten er «Hopp til hovedinnhold», men du kan tilpasse den:

<JumpToMainContent>Gå til innhold</JumpToMainContent>

Tilgjengelighet

Komponenten bruker sr-only for å skjule seg visuelt, men den er alltid tilgjengelig for skjermlesere
Ved fokus (Tab) vises den som en tydelig lenke med god kontrast øverst i venstre hjørne
Den følger WCAG 2.4.1 — Bypass Blocks
Alle sider bør ha denne komponenten som det første fokuserbare elementet

Bruksanbefalinger

Plassér som første element i body

Komponenten bør være det aller første fokuserbare elementet på siden, slik at tastaturbrukere kan hoppe over navigasjonen umiddelbart.

Ikke skjul den med display: none eller visibility: hidden

Bruk alltid komponenten som den er — den bruker sr-only/not-sr-only for å håndtere synlighet riktig.

Props

Prop	Type	Default	Beskrivelse
`targetId`	`string`	`"#main"`	ID-selector til elementet man hopper til
`children`	`node`	`"Hopp til hovedinnhold"`	Teksten som vises når lenken er fokusert