Merking av lenker

[mrosvik]

• Når en lenke tar brukeren til en ekstern side, skal vi da vise et ikon eller en tekst i lenken som indikerer at brukeren blir tatt til en ekstern side?
• Når skal lenken åpnes i samme fane og når skal den åpnes i en ny fane/vindu?
  • Hvordan informerer vi brukeren om at lenken åpnes i en ny fane?
• Hvordan merker vi filer

[Barsnes]

Eg synst ei ekstern lenke skal markerast med ikon av ein boks med ei pil som går ut:

Dette viser at lenka går ut av "boksen"(sida) du er på. Ikonet burde komme bak lenka:

Samtidig synst eg at alle eksterne lenker skal bli åpna i ny fane, så navigeringen brukaren allerede har gjort ikkje blir avbrutt.
Når du går på ei ekstern side er det liten sjanse for at den linker tilbake til sida du var på, og du kan miste kor du var på den original sida.

Eit negativt punkt med denne løysingen er når folk ikkje forstår ikonet. Eg trur ikkje noken blir redde for å trykke på lenka.
Det er allerede eit etablert mønster på internett, men ikkje alle har tatt det i bruk. Dersom me lager eit mønster på det, og det blir følgt, så vil dette bli naturlig for alle brukarar.

[mrosvik]

Alternative tekstlige varianter der du forstår at du blir tatt til en ny side:

• "Les mer om merverdiavgift på skatteetaten.no"
• "Gå til skatteetaten.no"

[solhell]

På generell basis er jeg ikke fan av lenketekster som begynner med "Les mer", "Klikk her", "Gå til", etc. Jeg mener det er bedre å gå rett på sak i stil med Merverdiavgift (skatteetaten.no) når det er frittstående lenker, eller når i løpende tekst at "les mer" og tilsvarende flyttes ut av lenken slik at det blir les mer om merverdiavgift (skatteetaten.no).

[Febakke]

Jeg liker best at lenker som går til andre sider beskrives i selve lenketeksten.

1. Ikonet er tvetydig, brukes både for eksterne linker og åpne i egen fane.

2. Uansett om alle er klar over det, eller kommer til å bli klar over hva ikonet betyr vil det aldri slå å skrive det i klar tekst. Jeg syns at det skal komme frem fra lenketeksten om den går til et nytt domene.

Til @Barsnes sitt poeng så skriver tilsynet at man kan bruke ikoner, men går ikke i detalj på hvilken. https://www.uutilsynet.no/veiledning/lenker/214

NAV Aksel anbefaler ikke bruk av ikoner for verken åpne i ny fane eller eksterne sider.
https://aksel.nav.no/god-praksis/artikler/lenker

Når det gjelder åpne i ny fane/vindu så tror jeg det er viktig når man er i en flyt du ikke vil avbryte. For eksempel fyller ut et skjema. Ellers ville jeg ikke endret forventet oppførsel. De fleste lenker åpner seg i samme vindu som du er i.

[eirikbacker]

Litt enig med deg @Febakke - vi hadde akkurat denne diskusjonen på Mattilsynet, for når vi lenker til noen andre, så kan ikke vi stå ansvarlig for kvaliteten på innholdet - det vil vi jo indikere men er ikke nødvendig ny fane.. andre ganger ønsker vi å åpne i ny fane - også til våre egne URLer - for å unngå at brukeren mister hvor de er i prosessen. For å gjøre det heeeeelt trygt for brukeren har vi endt opp med å skrive Lenketekst (åpner i ny fane).

Vi ser også at både eldre brukere på desktop, og de fleste på mobil, blir irritert eller forvirrent av at vi velger å åpne i nye faner, fordi det "brekker" forventet oppførsel til tilbakeknappen.

Dersom vi lander på å tilby et ikon, må vi også alltid ha en aria-label="Åpnes i ny fane" for å tilfredsstille UU-krav, så det er noe å ha i bakhodet i forhold til API-utforming også :)

[Barsnes]

Einig med at det kan "brekke" navigeringen til brukaren, og eg mistenker at det er derfor Safari har lagt til at tilbakeknappen i ei fane som blei åpna av ein anna tab tar deg til den forrige tabben og lukka fana som blei åpna.
Veit ikkje om andre nettlesarar gjer det samme

[eirikbacker]

oi, det viste jeg ikke de gjorde! ikke andre som gjør det meg bekjent :)

[schjetne]

Jeg er veldig glad for den funksjonaliteten fordi jeg er en sånn gamling som går til tilbakeknappen når jeg vil tilbake der jeg kom fra 😄

[schjetne]

Følger denne diskusjonen med interesse, og har også tatt det opp med teamet mitt som bygger Punkt, Oslo Origos designsystem. Jeg er tilbøyelig til å være enig med de som foreslår tekst, og jeg synes tvetydigheten til det "ekstern lenke"-ikonet er frustrerende. Betyr ikonet at det åpnes i ny fane, eller at det er en ekstern lenke? I Punkt bruker vi det til eksterne lenker, men det er vel ingen som er helt fornøyd med det, og litt avhengig av hva konsensus blir i denne diskusjonen er det mulig vi skal vurdere å endre praksis.

[TomasEng]

Jeg er av den oppfatning at eksterne lenker alltid burde åpnes i ny fane, mens interne alltid åpnes i den samme. Selv synes jeg i hvert fall at det er frustrerende når interne lenker åpner nye faner, siden jeg da ender opp med mange faner og det blir vanskelig å finne tilbake dit jeg kom fra. Hvis jeg likevel ønsker å åpne noe i en ny fane, vet jeg at jeg for eksempel kan klikke med musehjulet.

Med en slik regel som utgangspunkt opphører tvetydigheten. Man vet at markeringen betyr både at lenken åpnes i en ny fane og at den er ekstern. Når det gjelder markeringen, er ikonet allerede godt etablert, så jeg ser ikke noe videre problem med å bruke det. Men jeg liker også at det står "(ekstern lenke – åpnes i ny fane)" i tittelen på lenken. Jeg er tilhenger av å gjøre begge deler.

[mrosvik]

Forslag til foreløpige retningslinjer på link-komponenten ang. åpne i ny fane:

Både interne og eksterne lenker bør åpnes i samme fane/vindu. Da sikrer vi en forutsigbar brukeropplevelse fordi brukerens egne lenkeinnstillinger i nettleseren videreføres. Flere bruker Tilbake-knappen i nettleseren hvis lenken ikke førte dit de trodde, men det fungerer ikke når lenken ble åpnet i en ny fane.

Unntaket er hvis brukeren risikerer å miste innhold ved å klikke på lenken, for eksempel ved utfylling av et skjema. Det skal da informeres om at lenken åpnes i en ny fane.

Les mer om lenker på uutilsynet.no

[TomasEng]

Dette med å miste innhold er et godt poeng når det gjelder å åpne interne lenker nye faner. Samtidig vil jeg påstå at dersom man kommer i en situasjon hvor man faktisk risikerer å miste innhold ved å klikke på en lenke, så kan det være et symptom på at noe er galt med måten siden er utformet på.

[Camulos]

Vi (Brønnøysundregistrene) har følgende krav som er relevante for merking av lenker:

• Hvis vi lenker til et annet nettsted eller til en fil (ikke-web dokument) er dette vist slik at det er tydelig for brukeren.
• Meningen med en lenke er tydelig: Alle lenker har tekst som sier noe om hva lenken fører til (ikke bare "trykk her" eller "mer").

Krav 2 der er ment å dekke eller få oss til å huske på WCAG suksesskriteriene:

• 2.4.4 Formål med lenke (i kontekst) (A)
• 2.4.9 Link Purpose (Link Only) (AAA)

I praksis så betyr det at lenker som peker til et annet domene, åpnes i ny fane eller er til en fil skal være mulig å forstå før en klikker:

• "denne lenken fører til et tema på denne andre siden (ekstern lenke) ikon"
• "denne lenken fører til mer informasjon om det du nå holder på med (åpnes i ny fane) ikon"
• "denne lenken fører til mer informasjon på denne andre siden om det du nå holder på med (ekstern lenke, åpnes i ny fane) ikon"

Jeg krever ikke at de som bygger tjenester skal alltid bruke både tekst i parentes, ikon og forklare det i lenketeksten eller i setningen/paragrafen hvor lenken står. Men det skal gjøres likt i hele tjenesten og en skal bruke tekst i parentes eller ikon uansett om det er forklart i teksten eller ikke. Det er nok noe mer naturlig med kun ikon i tillegg om det allerede står i teksten at det er en ekstern side eller at lenken ikke avbryter det brukeren holder på med (feks fylle ut et skjema, som er eneste konteksten vi ikke åpner i samme fane).

Per i dag er det gjort en god del arbeid på å i hvert fall markere så mange eksterne lenker som mulig med ikon. Åpne i ny fane er kun tillatt i skjema hos oss og det skal det også ha vært gjort en god arbeid med å fikse.

Eksempel på lenker til annet domene har vi ofte i "Nyttige lenker" boks på hjelpeartikler, og når vi feks peker til et skjema på Altinn.

[mrosvik]

Vi starter opp dette mønsteret Januar 2025. Digdir inviterer og fasilitererer.

[Mokkatroffen]

@Camulos:
Eksempelet deres fra "Nyttige lenker" bryter med lovkravene (1.1.1) om man ikke tilfører ytterligere informasjon. Jeg synes også at det er litt snodig hvordan ikonet ikke er interaktivt / en del av lenke definisjonen.

Hvis dere ikke setter et aboslutt krav om å skrive (åpnes i ny fane) (last ned pdf) etc på enden av lenker må dere stille krav om at slike ikoner har et tekstlig alterantiv. I praksis vil en seende i dag få vite at disse lenkene åpner ny fane, skjermleserbrukere vil ikke få denne informasjonen:

Merk også at det her er flere skjermleser aspekter som burde vurderes, som hvorvidt informasjonen ikonet kommuniserer er tilgjengelig i elementlisten til ulike skjermlesere, hvorvidt dere skal bruke ikon/bilde og hvorvidt den beskrivende teksten skal være en del av denne definisjonen eller defineres på en annen måte (sr-only).

[solhell]

Mitt forslag er som følger:
Lenketekst som kort forteller hva som er innholdet på siden det lenkes til + (domenenavn) + ikon [alt-tekst: åpens i ny fane]

For eksempel: Komponenter i designsystemet (designsystemet.no) (og så ikon til slutt med nevnte alt-tekst, dette må ligge inn i (a)-elementet slik at det blir lest opp av skjermleser)

Jeg mener det gir merverdi å fortelle domenenavnet i stedet for bare den generiske "ekstern lenke".

[sigveres]

Kommer inn litt sent i diskusjonen her, men deler en teknikk som jeg har brukt for lenker i løpende tekst. Bruker denne teknikken i Link-komponent for Patentstyrets designsystem.

Ikon
Vi bruker ikon for både interne og eksterne lenker for å visuelt vise hensikten med lenke for alle brukere, uavhengig funksjonsnedsettelse.
Ikonet gir lenker en forsterket visuell effekt som kan være nyttig for alle. Bruken av ikon støtter også WCAG 1.4.1 - bruk av farge fordi det gir et ekstra hint enn kun understrek alene.

Tilgjengelighet
For at "åpne i ny fane" skal leses opp korrekt av skjermleser bruker jeg aria-describedby som peker til en tekst med sr-only-klasse. På den måten blir informasjonen behandlet som tilleggsinformasjon, og ikke en del av lenkens navn - slik det ville bli gjort med aria-label.
Denne teknikken funker også dersom ikon blir lagt inn med css, eller om ikoner by default er skjult.

Eksempel

<a href="#"  target="_blank" rel="noopener noreferrer" aria-describedby="external-desc-1">
  Nyttig lenke
  <span aria-hidden="true" class="icon">open_in_new</span>
</a>

<span id="external-desc-1" class="sr-only">
  Åpner i ny fane
</span>

Potensielt problem med WCAG 2.5.3 Ledetekst i navn
Usikker om dette er et problem enda, men en annen grunn til at jeg har unngått å overskrive ikke-visuelle aria-label-verdier da det kan gi konflikter med WCAG 2.5.3 Ledetekst i navn opp mot talegjenkjenning.

Aria-label erstatter den synlige teksten som tilgjengelig navn for tilgjengelighetsverktøy. Dette skaper inkonsekvens mellom det brukeren
ser og det som talegjenkjenningsprogrammer forventer når de navigerer basert på synlig tekst.
Det vil si at navigering til f.eks lenker ikke vil funke, fordi talegjenkjenningsprogrammer forventer at du skal si "[lenketekst] åpner i ny fane", ikke bare "[lenketekst]"

Eksempel med aria-label
Eksempelet viser at lenkenavnet egentlig er "Nyttig lenke - åpner i ny fane" selv om den visuelle lenken er "Nyttig lenke"

Eksempel med aria-description
Eksempelet viser at lenkenavnet kun er "Nyttig lenke" som er lik den visuelle teksten

[mrosvik]

Takk for godt innspill. Dette har vi vurdert, og vi har landet på å ikke anbefale bruk av ikon.

Grunnen er at dette ikonet blir tolket svært ulikt av brukere. Noen tror det betyr at lenken åpnes i ny fane, andre at det betyr ekstern side, og noen oppfatter det bare som en dekorasjon. Dermed gir ikke ikonet i seg selv tydelig og forutsigbar informasjon.

Derfor anbefaler vi heller at:

• Informasjon om at en lenke er ekstern, eller åpnes i ny fane, formidles i selve lenketeksten der det er relevant.
• Ikon ikke skal være eneste bærer av denne informasjonen, av hensyn til både forståelse og tilgjengelighet.

Vi har samlet vurderingene våre her: https://designsystemet.no/no/patterns/external-links

Vi tar gjerne imot flere perspektiver, men dette er bakgrunnen for anbefalingen slik den er formulert nå.