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) |
| - Öppnas i Adobe Reader eller annat verktyg som kan öppna pdf-file alternativt laddas ner. | |
|
Word Excel Powerpoint |
- Laddas ner. |
Ui-kittet
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-labelanvä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.