Lenke (Link)

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`