Link

Egnet til:

• å lenke til en ny side internt eller eksternt
• å lenke til et annet sted på siden
• å åpne faner eller laste ned filer

Uegnet til:

• handlinger på siden som for eksempel «Lagre» eller «Send inn». Da skal du normalt bruke InlineButton i stedet
• å plassere i liste med flere lenker. Bruk istedet LinkGroup

Teknisk dokumentasjon

Gå til Link i Storybook for tekniske detaljer. 

Varianter

Vi har fire lenkevarianter.

Vanlig lenke

En standard lenke kan brukes både i brødtekst og kan stå for seg selv. 

Ekstern lenke

Når vi tar brukeren til en ekstern side, skal vi alltid bruke denne lenken.

Lenke med ikon

Ikonet ligger på venstre side og er et funksjonelt tillegg som forteller brukerne hva de får når de klikker på lenken. Ikonet skjult for en skjermleser fordi det er å betrakte som pynt.

Ekstern lenke med ikon

Vi kan også legge til ikon på eksterne lenker, som på denne, som forteller at brukeren kommer til en innboks. Det eksterne ikonet har teksten «Til et annet nettsted» som blir lest opp av en skjermleser og teksten finnes på hovedspråkene bokmål, nynorsk, engelsk og samisk.

Hvordan bruke komponenten 

Hoveregler

Hovedregelen er at lenker skal åpnes i samme vindu.

• Når lenker åpnes i samme vindu sikrer vi en konsistent og forutsigbar brukeropplevelse fordi brukerens egne lenkeinnstillinger i nettleseren videreføres.

Når bør lenken åpnes i ny fane, eller som nedlastning?

• Hvis brukeren risikerer å miste innhold ved å klikke på lenken. Eksempel: Ved utfylling av skjema.
• Hvis du lenker til innhold som brukeren trenger for å gjøre en oppgave. Eksempel: Veiledning.

Slik skriver du lenker riktig

• Lenker skal gi brukeren forståelse for hva de inneholder, og de skal sikre god tilgjengelighet. Se alle prinsippene for lenketekster. 
• Lenker som åpnes i ny fane skal alltid forklare dette i tekst med parentes slik: (åpnes i ny fane)

Universell utforming  

• Sjekk rådene om kontrastfarger og innhold i lenker. 
• En lenke skal ha minst 2 ulike visuelle «hint» for å skille det fra vanlig tekst. Hos oss bruker vi blå farge og understreking som standard.
• Lenketekst mot bakgrunnsfargen må ha et kontrastforhold på minst 4.5:1 for liten tekst, mens for stor og fet tekst er kontrastforholdet på 3.0:1. Stor tekst er definert som større enn 24 piksler høy eller minst 19 piksler høy i fet skrift.
• Lenketeksten eller alternativ tekst (grafisk lenke) skal tydeliggjøre hva som er målet til lenken.