Skip link

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 skip link når

• det er fleire tab-stopp før hovudinnhaldet
• du skal gjere det mogleg å hoppe over innhald som blir gjenteke på fleire sider, for eksempel menyar, lenker og topptekst

Unngå skip link når

• sida berre har nokre få tab-stopp før hovudinnhaldet
• nettstaden består av ei enkelt side utan gjentakande innhald

Retningslinjer

Skip link bør vere eit av dei første elementa markøren går til når du navigerer med tastaturet.

Når ein navigerer med tastatur, skal det vere mogleg å hoppe over innhald som går igjen på fleire sider, til dømes menyar, lenker og topptekst. Skip link gjer at brukaren raskare kjem rett til hovudinnhaldet på sida.

Dersom det berre er nokre få tab-stopp fram til hovudinnhaldet, til dømes om du berre har ei «Heim»-lenke øvst på sida, kan det vere unødvendig å leggje inn ein skip link. Då risikerer du at det vert fleire knappar å forhalde seg til enn nødvendig.

Vi plasserer skip link som det første fokuserbare elementet. Dersom sida har eit varsel om informasjonskapslar, legg du skip link rett etter koden for dette varselet.

Skip link bør skilje seg frå resten av innhaldet, slik at folk som kan sjå, men bruker tastaturet til å navigere, kjenner att dette elementet før dei flyttar vidare.

Tekst

Pass på at teksten tydeleg seier kva snarvegen skal brukast til. Bruk ein enkel tekst, som for eksempel «Hopp til hovudinnhald».