Links

Designværdier

Sådan bruges links

Tilgængelighed

Linkteksten skal give mening for brugeren og angive, hvad linket fører hen til.

Links skal enten være understreget eller markeret på anden vis. Et link må ikke kun være angivet med en farve.

Brugerne skal kunne sætte fokus på links og aktivere dem ved brug af tastaturet.

Links skal have en defineret href attribut i koden.

Har linket en “hover” skal denne kunne aktiveres både med tastatur og mus.

Anvendes til

Brug links til at lade brugeren navigere til andre sider i din løsning.

Brug links til at linke til sider uden for din løsning. Husk at markere dette med et ikon som beskrevet under implementeringsafsnittet under eksternt link.

Se også Gå til sidens indhold, Funktionslink og Tilbage link.

Brugervenlighed

Hvis et link fører væk fra den aktuelle side og brugeren kan miste data eller risikere at skulle udfylde samme del igen ved at følge linket, så advisér brugeren om dette i en browseradvarsel. Bed også brugeren om at be- eller afkræfte ønsket om at forlade siden.

Brug links med omtanke i en selvbetjeningsløsning. Linker du for meget ud til eksterne websites, kan det virke forstyrrende for flowet og få brugeren ud af kontekst. Omvendt kan det give stor værdi for brugeren, hvis du linker ud til relevante informationer. Fx informationer, som understøtter brugerens vej gennem selvbetjeningsløsningen og/eller giver væsentlige input til, hvad brugeren skal indtaste i løsningen.

Gør gerne brugeren opmærksom på, hvor det eksterne link fører hen, fx i en parentes som en del af linket, hvis det ikke fremgår af linkteksten.

Vær dog opmærksom på, at det kan virke forstyrrende for flowet og få brugeren ud af kontekst, hvis du linker for meget ud til eksterne websites.

Eksternt link

Sekundære links

Sekundære links bruges til at skabe en visuel forskel på links til funktioner og særlige typer af navigation.

Designværdier

Anvendes til

• Funktionslink
• Brødkrumme
• Footer links

Anvendes ikke til

Brug ikke sekundære links i eller imellem afsnit af tekst eller til generel navigation mellem sider, brug da et standard link.

Vejledning

Vær ikke kreativ med brugen af sekundære links, da de giver mindre fært end standard-links. Alternativ anvendelse af sekundære links kan tillige skabe tvivl og forvirring hos brugerne omkring, hvad der er klikbart.

Billeder som links

Links har som standard stylingen display: inline. Hvis du vil anvende et billede som link, er du nødt til at vælge en anden display-værdi ved at tilføje en hjælpeklasse, fx d-inline-block eller d-block, ellers vises der ikke nogen fokusramme omkring billedet, når linket har fokus. Se alle muligheder under hjælpeklasser for display.

Bemærk, at når du ændrer display, vil bredden på dit billede blive begrænset. Du kan forhindre dette ved også at tilføje klassen full-width-image til linket udover hjælpeklassen.

Eksternt link

HTML Struktur

<p>Link som åbner et <a href="" class="icon-link">eksternt
        website<svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#open-in-new"></use></svg></a>
</p>

Eksternt link gør brug af ikoner. Se dokumentationen for implementering af ikoner.

Bemærk at eksterne links er stylet med display: inline-block, hvilket betyder, at lange links i nogle tilfælde kan give uhensigtsmæssige linjeskift. Anvend evt. en hjælpeklasse for display, fx d-inline, i disse tilfælde.

Sekundære links

HTML Struktur

<a href="#" class="function-link">Sekundært link</a>

Billeder som links

Brug en hjælpeklasse for display til at vælge en anden værdi end inline.

Tilføj yderligere klassen full-width-image, hvis billedets bredde ikke skal begrænses.

Nedenstående kode viser et eksempel på, hvordan klasserne kan anvendes:

<a href="#" class="d-block full-width-image">
  <img src="..." alt="...">
</a>