Lenker

Lenker er koblinger som peker på andre nettsider eller elementer, og kobler sammen både interne og eksterne nettsider. Det finnes flere typer lenker, og varianter kan være fillenker, bildelenker, telefonlenker, e-postlenker, ankere m.m.

Denne siden ble sist oppdatert 20.02.2023. Vi jobber hele tiden med å gjøre designguiden bedre, og ønsker tilbakemeldinger. Har du kommentarer, finner feil eller er uenig i noe, ta kontakt. Du kan sende en e-post til web@uke.oslo.kommune.no eller bruke “Fant du det du leter etter” nederst på siden. Husk å legge ved e-postadresse hvis du ønsker svar.

Visning

Det finnes flere typer lenker:

  • interne lenke standard
  • anker til en overskrift på en side (internlenking)
  • ekstern lenke har et tilhørende ikon, og går enten ut av domenet, eller åpner siden i en ny fane/nytt vindu
  • e-post-lenke skal vises med e-post-adressen den lenkes til web@uke.oslo.kommune.no (mailto)
  • lenke til et telefonnummer 02 180 (tel:02180)
  • lenke til fil (PDF) (filtype og størrelse i parentes)
  • Det er også mulig å lage bildelenker. Alt-teksten skal da beskrive lenkens mål, og uavhengig av bildets motiv. Se Difi om bildelenker.
    • Lenker med bilde som f.eks. funksjonen "Skriv ut" + bilde av ikon, skal imidlertid ikke ha alt-tekst

Prinsipper for bruk av lenker

  • Lenker skal ikke brukes som eller forveksles med knapper
  • Ikon for eksterne lenker benyttes når vi lenker videre til et annet nettsted eller et nytt domene.
    • Unntak er lenking til Oslo kommunes subdomener (f.eks. tjenester.oslo.kommune.no). Her brukes vanlige standard lenker.
  • Når vi lenker ut til et annet nettsted eller et nytt domene, bør det stå i lenketeksten hvor brukeren kommer til
    • Ved internlenking trenger vi imidlertid ikke skrive hvor brukerne kommer (unntak når vi lenker til "Søknad og skjema" som befinner seg bak innlogging)
  • Lenker skal åpne seg i samme fane/vindu. Dette er god praksis og i henhold til universell utforming.
    • Dersom det oppstår behov for å åpne en side i en ny fane/et nytt vindu, bør det være gode grunner for dette (f.eks. lenking til PDF). Ikon for ekstern lenke skal da benyttes.
  • Lenker til dokumenter skal merkes med dokumenttype og filstørrelse i megabyte (MB) i parentes, f.eks.:
  • Lenketekstene skal være korte, presise og beskrive tydelig hva som ligger bak lenken. Bruk ord som brukeren leter etter og forstår.
  • Unngå lenker som "Les mer", "Klikk her" og "Mer info"
  • Lenker bør ikke gå over to linjer, da er det mange brukere som ikke forstår at det er en lenke

Eksempler på utforming av lenketekst

​Lenketekstene skal kunne forstås uten resten av teksten (dette er særlig viktig for folk som bruker leselist og navigerer i lenkene).

Eksempler på gode lenketekster

Eksempler på dårlige lenketekster

  • Skal du svare på tilbud eller endre søknad må du logge inn via ID-porten. Da trenger du elektronisk id fra MinID, BankID, Buypass eller Har du ikke det fra før bestiller du det på Difis nettsider. Der finner du også informasjon om hvordan du logger deg på.
  • Nærmere informasjon om programmet legges fortløpende ut på arrangementets Facebooksider.
  • Innbyggerundersøkelsen 2013(Difi)

Universell utforming

Lenker skal åpne seg i samme fane/vindu. Dette er god praksis og i henhold til universell utforming.

Les om overordnede prinsipper og krav for universell utforming

WCAG 2.0 krav

Film fra Difi, tips nr. 13 Lag korte og beskrivende lenketekster (Difi)

WCAG 1.4.1 (nivå A) Bruk av farge Ikke bruk presentasjon som bygger utelukkende på farge (Difi)

WCAG 2.4.4 (nivå A) Formål med lenke i kontekst Alle lenkers mål og funksjon fremgår tydelig av lenketeksten (Difi)

WCAG 2.4.9 (nivå AAA) Formål med lenke, bare lenke Alle lenker skal ha en lenketekst som uavhengig av kontekst gir informasjon om formålet med lenken (Difi)

Difi anbefaler

"Lenker må være visuelt identifiserbare og lenkens mål må fremgå tydelig, ellers risikerer du at brukere enten ikke ser lenken eller velger ikke å åpne lenken."

"Brukeren må kunne identifisere alle lenker uavhengig av situasjon, evner og innstillinger på utstyret som benyttes. Dette betyr at lenker må være markert med mer enn bare farge. Det kan være for eksempel være understreking av lenketekst, eller ikon knyttet til lenken, men gjerne i kombinasjon med farge."

"All relevant informasjon om lenken skal stå i selve lenketeksten. Du trenger derfor ikke å legge inn mer informasjon om lenken i et title-attbutt eller en alternativ tekst til lenken."

"Lenker kan også være markert med kontrast mellom fargen på lenken og fargen på teksten som ligger rundt. Kontrasten skal være på minimum 3:1. I tillegg til kontrast skal det være en visuell markering når brukeren peker på lenken med mus, eller navigerer til lenken med tastaturet. Markeringen kan for eksempel være understreking, fet skrift eller en annen skrifttype. Det generelle kravet til kontrast mellom tekst og bakgrunn gjelder fortsatt, både for løpende tekst og lenker."

"I tillegg til å tydeliggjøre dokumentlenker, kan du gjerne supplere med filstørrelse. Dessuten er det fordelaktig for mange brukere dersom også andre egenskaper til lenken beskrives. Hvis lenken leder til en film eller et lydklipp, til et annet nettsted, en side på et annet språk eller åpnes i nytt vindu kan det være at brukeren ikke kan dra nytte av innholdet, eller kan bli overrasket og forvirret over et nytt grensesnitt. Slike egenskaper kan du beskrive ved hjelp av ikoner eller ren tekst, og det finnes anbefalinger på hvordan du bør utforme slike ikoner."

Anbefalingene for universell utforming av lenker er hentet fra Direktoratet for Forvaltning og IKT (tilsyn for universell utforming og IKT)

Relatert

Knapper