Komponenter

Skip link

Skip link hjelper folk som bruker tastaturnavigasjon til å navigere, slik at dei enkelt kan gå til det viktigaste innhaldet på ei side.

Oversikt Kode Tilgjengelighet

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => {
  return (
    <>
      <Paragraph>
        For å vise skip link, tab til dette eksempelet, eller klikk inni
        eksempelet og trykk <kbd>Tab</kbd>.
        <SkipLink href='#main-content'>Hopp til hovedinnhold</SkipLink>
      </Paragraph>
      <main id='main-content' tabIndex={-1}>
        Region som kan motta fokus fra skip link.
      </main>
    </>
  );
};

render(<Preview />)

Bruk

Legg klassenavnet ds-skip-link på ein <a>-tagg som peikar til hovudinnhaldet på sida. Målet bør kunne motta fokus med tabindex="-1".

CSS variabler og data-attributter

Størrelsar styrast med data-size og fargar med data-color. Komponenten vil arve næraste forelder med desse satt.

CSS-variabler
Navn	Verdi
--dsc-skiplink-padding	var(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4)
--dsc-skiplink-background	var(--ds-color-surface-hover)
--dsc-skiplink-color	var(--ds-color-text-default)

Ingen relevante data-attributter funnet.

React

import { SkipLink } from "@digdir/designsystemet-react";
<SkipLink href="#main-content">Hopp til hovedinnhold</SkipLink>;

children
Description: The content to display inside the skiplink.
Type: ReactNode

href
Description: Href of an element in the DOM the skiplink should skip to. E.g #main-content
Type: string

Name	Type	Default	Description
children	`ReactNode`	-	The content to display inside the skiplink.
href	`string`	-	Href of an element in the DOM the skiplink should skip to. E.g #main-content

Rediger denne siden på github.com (åpnes i ny fane)