Lenke (Link)

Lenker brukes ved navigering

til en annen side på samme nettsted
innad i samme side (anker lenke),
til andre tjenester/nettsteder.

Se retningslinjer for når knapper skal bruke.

Beskriv i lenketeksten hva brukeren kan forvente seg

Ikke bruk kun “les mer”, men “les mer om rev”. Brukere med skjermforstørrer ser nødvendigvis ikke konteksten lenken står i. Sørg for at lenken gir mening dersom du kun leser den.

Lenke til eksterne nettsteder

For lenker til eksterne nettsteder (annet domene eller subdomene) indikeres dette ved bruk av ekstern lenke-ikon som er etterfulgt av lenken.

Avvik ekstern-intern lenke

Dersom man ønsker at brukeren skal oppleve at de er innad i samme tjeneste, men teknisk sett på et annet domene, skal ikke lenken merkes som ekstern.

Alltid åpne i samme fane

Det er ikke et lovkrav, men en anbefaling at lenker uavhengig av om de er til samme side eller et nytt nettsted åpnes i samme fane. Dette gjør det enklere for brukere å navigere tilbake til der de var. Brukere som ønsker å åpne i egen fane har fortsatt mulighet til dette ved å holde inne CTRL eller høyre-klikke å velge åpne i egen fane eller vindu.

Lenkestilene er et rent CSS-verktøy som importeres separat fra @artsdatabanken/tokens. De er opt-in — ingen lenker styles automatisk. Du velger selv hvilke lenker som skal få stilen, enten enkeltvis med klassen .adb-link eller i bulk med containerklassen .adb-link-area.

Hvorfor ikke en Web Component?

Lenker (<a>) har rik nativ oppførsel — høyreklikkmeny, :visited, dra-og-slipp, tilgjengelighetstre. Å pakke dem i Shadow DOM ville bryte dette. En CSS-klasse gir full kontroll uten ulemper.

Installasjon

/* Importer lenkestiler (krever at tokens allerede er importert) */
@import '@artsdatabanken/tokens/link';

Enkeltlenke — `.adb-link`

Legg til klassen .adb-link på enkelt-<a>-elementer:

Standard lenke

Artsdatabanken

Lenke i løpende tekst

Les mer om Rødlista for arter 2021 og hvordan den brukes i forvaltningen.

<a href="/om-oss" class="adb-link">Om oss</a>

<p>Les mer om <a href="/rodlista" class="adb-link">Rødlista</a> og hvordan den brukes.</p>

Lenkeområde — `.adb-link-area`

Legg til .adb-link-area på en container for å style alle <a>-elementer inni:

Alle lenker i containeren styles automatisk

Artsdatabanken forvalter Rødlista for arter, Fremmedartslista og Naturtyper i Norge (NiN).

Se også Artskart for kartbasert søk.

<div class="adb-link-area">
  <p>
    Artsdatabanken forvalter <a href="/rodlista">Rødlista</a>,
    <a href="/fremmedartslista">Fremmedartslista</a> og
    <a href="/naturtyper">Naturtyper i Norge (NiN)</a>.
  </p>
</div>

Dette erstatter lange selektorkjeder som .node__content p a, .properties a, … med én enkel klasse på containeren.

Ekstern lenke — `.adb-link--external`

Legg til .adb-link--external for å vise et ikon som indikerer at lenken åpner et eksternt nettsted:

Enkeltlenke med eksternt ikon

GBIF — Global Biodiversity Information Facility

I et lenkeområde

Data deles med GBIF og IUCN Red List.

<!-- Enkeltlenke -->
<a href="https://gbif.org" class="adb-link adb-link--external"
   target="_blank" rel="noopener noreferrer">GBIF</a>

<!-- I et lenkeområde -->
<div class="adb-link-area">
  <a href="https://gbif.org" class="adb-link--external"
     target="_blank" rel="noopener noreferrer">GBIF</a>
</div>

Ikonet er kun visuelt (::after-pseudoelement). For skjermlesere, legg til skjult tekst som indikerer at lenken er ekstern. Bruk markExternalLinks() for å automatisere dette — eller legg til manuelt:

<a href="https://gbif.org" class="adb-link adb-link--external"
   target="_blank" rel="noopener noreferrer">
  GBIF
  <span class="adb-sr-only">(ekstern lenke)</span>
</a>

Automatisk merking — `markExternalLinks()`

I stedet for å legge til .adb-link--external manuelt på hver lenke, kan du bruke markExternalLinks() fra @artsdatabanken/components. Funksjonen skanner en container, oppdager eksterne lenker automatisk, og legger til klassen og skjermlesertekst.

import { markExternalLinks } from '@artsdatabanken/components/utils';

markExternalLinks(document, {
  whitelistedHosts: ['artsdatabanken.no', 'lister.artsdatabanken.no'],
});

Funksjonen gjør tre ting:

Finner alle <a>-elementer med href som starter med http
Sammenligner hostname mot en whitelist (nåværende host er alltid inkludert)
Legger til .adb-link--external og en <span class="adb-sr-only">(ekstern lenke)</span> på eksterne lenker

API — `markExternalLinks(container, options)`

Parameter	Type	Standard	Beskrivelse
`container`	`HTMLElement \| Document`	`document`	Elementet som skannes
`options.whitelistedHosts`	`string[]`	`[]`	Ekstra vertsnavn som regnes som interne
`options.srText`	`string`	`'(ekstern lenke)'`	Skjermlesertekst som legges til
`options.srOnlyClass`	`string`	`'adb-sr-only'`	CSS-klassen for skjult tekst

Bruk i ulike rammeverk

Drupal + Vite:

// I JavaScript entry-filen
import { markExternalLinks } from '@artsdatabanken/components/utils';

document.addEventListener('DOMContentLoaded', () => {
  markExternalLinks(document, {
    whitelistedHosts: ['artsdatabanken.no', 'lister.artsdatabanken.no'],
  });
});

Angular:

import { markExternalLinks } from '@artsdatabanken/components/utils';

@Component({ ... })
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    markExternalLinks(document, {
      whitelistedHosts: ['artsdatabanken.no'],
    });
  }
}

Migrasjon fra eksisterende SCSS

Erstatter @include styled-link() med CSS-klasser:

Før (SCSS)	Etter (designsystemet)
`@include styled-link()` på enkeltselektor	`.adb-link` på `<a>`
`.node__content p a, .properties a, …`	`.adb-link-area` på containeren
`.styled-link`	`.adb-link`
`.is-external` + `@include external-decoration()`	`.adb-link--external`

API — CSS-klasser

Klasse	Brukes på	Beskrivelse
`.adb-link`	`<a>`	Styler en enkelt lenke
`.adb-link-area`	Container (`<div>`, `<section>`, etc.)	Styler alle `<a>` inne i containeren
`.adb-link--external`	`<a>`	Legger til eksternt-lenke-ikon etter lenketeksten
`.adb-sr-only`	Vilkårlig element	Skjuler visuelt, synlig for skjermlesere

Design-tokens brukt

Token	Bruk
`--adb-text-accent`	Standard lenkefarge
`--adb-text-hover`	Lenkefarge ved hover
`--adb-text-visited`	Lenkefarge etter besøk
`--adb-surface-subtle`	Bakgrunn ved aktiv-klikk
`--adb-focus-outer`	Fokusringens farge
`--adb-spacing-2xsm`	Avstand mellom lenketekst og eksternt ikon

Universell utforming (WCAG 2.1 AA)

Understreking

Lenker er alltid understreket (2 px ::before-strek), som oppfyller WCAG 1.4.1 — lenker identifiseres ikke kun ved farge. Understreken øker til 4 px ved hover for tydelig visuell tilbakemelding.

Fargekontrast

Tilstand	Farge	Mot bakgrunn	Kontrast	Status
Standard	`#005A71`	`#FFFCF7`	5,3 : 1	✅ AA
Hover	`#004557`	`#FFFCF7`	7,2 : 1	✅ AA
Visited	`#616B6D`	`#FFFCF7`	4,5 : 1	✅ AA

Fokusindikator

Fokusringen bruker samme mønster som knapper og trekkspill:

4 px ytre outline (--adb-focus-outer / #262F31)
4 px offset fra elementkanten
Vises kun ved tastaturnavigasjon (:focus-visible)

Ekstern-lenke-ikon

Ikonet er et visuelt hint (CSS ::after). For fullstendig tilgjengelighet:

Legg til skjult tekst for skjermlesere: <span class="sr-only">(åpner i nytt vindu)</span>
Bruk alltid rel="noopener noreferrer" med target="_blank" for sikkerhet

WCAG-kriterier

Kriterium	Nivå	Oppfylt	Merknad
1.3.1 Informasjon og relasjoner	A	✅	Nativt `<a>`-element — semantisk korrekt
1.4.1 Bruk av farge	A	✅	Understreking skiller lenker fra vanlig tekst
1.4.3 Kontrast (minimum)	AA	✅	Alle tilstander ≥ 4,5 : 1
1.4.11 Kontrast for ikke-tekstlig innhold	AA	✅	Understreking og ikon har tilstrekkelig kontrast
2.1.1 Tastatur	A	✅	Native `<a>` — fungerer med `Enter`
2.4.7 Fokus synlig	AA	✅	4 px fokusring ved `:focus-visible`