Länk

Länkens syfte är att förflytta användaren ifrån aktuell sida till en annan sida. En länk kan även användas för att förflytta användaren till en annan plats på samma sida.


Länkar skall aldrig användas för att genomföra en åtgärd (action). Vid dessa situationer skall istället en knapp användas.

Visuella exempel

Länktyp Beteenden och användningsområde
Intern länk - Öppnas i samma flik
- Länklistor, fristående länkar
Besökt länk - Används främst i listor som t.ex. sökresultat
Så här används länkar i brödtext. - Öppnas i samma flik
- Brödtext, tabeller, listor
Länk till extern webbplats - Öppnas i samma flik (kommer ses över)
Pdf - Öppnas i Adobe Reader eller annat verktyg som kan öppna pdf-file alternativt laddas ner.
Word
Excel
Powerpoint
- Laddas ner.

Ui-kittet

Länk

Riktlinjer

  • En länktext ska vara tydlig så att användaren förstår vart en länk leder även om länken lyfts ur sitt sammanhang. Undvik länkar som endast heter "Tillbaka" eller "Läs mer".
  • Skriv länktexten så kort som möjligt.
  • En länk i ett stycke/brödtext ska vara understruken.
  • Undvik att i ett stycke placera länkar för nära varandra.
  • Kraven för kontrast (WCAG AA) mellan länkfärg och bakgrundsfärg ska vara uppfyllda. Konstrasten ska vara minst 4,5:1.
  • De länkar som inte är understrukna får hovereffekt i form av understrykning. (Förmodligen inte tillräckligt för att uppnå tillgänglighetskrav - ses över)
  • Navigering på webbplatsen och inom tjänsterna sker primärt via brödsmulor. Tillbakalänkar används endast i undantagsfall.
  • Undvik fraser som "Gå till..." , "Till sidan..." i länken, då det är självklart att länken leder till en annan del av webbplatsen.
  • Använd aldrig title-attributet för att förtydliga informationen om en länk. Låt istället länktexten i sig vara tydlig.
  • I vissa fall kan attributet aria-label användas för att förtydliga en länktext, men det ska ses mer som ett undantag.
  • Länkar placerade utanför ett stycke ska alltid föregås av en länk-ikon (>) för att tydliggöra att det är en länk.
  • Ikonen som är kopplad till länktexten ska också vara klickbar.
  • Länkar öppnas alltid i samma flik. Med undantag för pdf:er som öppnas i Adobe Reader eller annat verktyg för att visa pdf-filer alternativt laddas ner. ()
  • I sökresultat ska rubriklänk markeras som besökt länk.

Tillgänglig komponent

  • Alla ikoner som utgör en länk och som definieras inom <i> skall ha attributet aria-hidden="true".
  • Behöver du förtydliga länkens syfte eller mål så kan attributet aria-label användas. Det är svårt att säga när attributet behövs, men om flera länkar i t.ex. ett sökresultat är identiska så kan aria-label användas.

    Kom ihåg att attributet aria-label:
    - endast används av skärmläsare och andra liknande verktyg.
    - overridar länktexten för användare av dessa verktyg.