Link

Lenkestil med tydelig understrek, hover og fokusmarkering. Skal lenken se ut som en knapp, bruk Button på <a>-elementet i stedet.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/link.css"

I løpende tekst

Eksempel

Kode

<p>
Søknaden er sendt. Du finner den igjen under
<a class="fs-link" href="#">Mine søknader</a>, og vi sender deg en
e-post når den er behandlet.
</p>

Deaktivert lenke

Eksempel

Kode

<a class="fs-link" href="#">Se kvittering</a>
<a class="fs-link" aria-disabled="true" href="#">Se årsoppgave</a>

aria-disabled="true" demper fargen og slår av klikk med pointer-events: none. Lenken blir liggende i tabrekkefølgen, så skjermlesere kan lese den og si at den er utilgjengelig. Det er forskjellen fra å fjerne href.

Merk at pointer-events: none stopper musa, ikke tastaturet. Skal lenken ikke kunne følges i det hele tatt, må du også fjerne href.

TypeScript

import { fs } from "@fristil/designsystem"

const lenke = document.querySelector<HTMLAnchorElement>("#arsoppgave")

fs.setAttributes(lenke, fs.link({ disabled: !klar }))

Blir årsoppgaven klar senere, kaller du den på nytt med disabled: false. Da fjernes aria-disabled, og lenken virker igjen.

Klasser du kan style

Klasse	Hva det er
.fs-link	Lenken. Besøkt og deaktivert skiller seg med :visited og aria-disabled.

Se Tilpasning for hvordan laget virker.

Tilgjengelighet

• Lenketeksten skal gi mening lest alene. Skjermlesere kan liste opp alle lenker på siden, og der hjelper «Se faktura for mars» der «Klikk her» ikke sier noe.
• Ikke fjern outline på :focus-visible. Den er det eneste tastaturbrukere navigerer etter.
• Åpner lenken i ny fane, si det i teksten eller med aria-label.