Link
Länkar låter användaren navigera till en annan sida eller länkar till dokument (t. ex. en Word-fil). Länkarna kan användas enskilt eller i exempelvis länklistor.
Innehållsförteckning
Komponentkällor
1177
Inera
Designspecifikation
Olika typer av länkar
Länkar i brödtext är alltid understrukna. Länkar med ikon framför är aldrig understrukna. De länkar som har extern länk-ikon kan vara av båda sorter.
Vanlig understruken länk i löptext
Och i fall där länken leder ut, en extern länk-ikon
Länk med ikon i början (filformat, eller annan typ av ikon)
Länk för navigation, har en pili början
Och i fall där länken leder ut, en extern länk-ikon
Länk för navigation som är aktiv (används i t ex huvudmenyer och content navigation-komponenten)
Viktigt att se till att länken läses upp korrekt av skärmläsare.
Länklista
Flera länkar kan sättas samman för att bilda exempelvis en länklista.
Att tänka på
Blanda inte länkar till mottagningar och länkar till dokument samt sidor i samma länklista.
Använd specifik länklista för mottagningar. Länken bör använda ikonen “Find care” (positionsmarkör med plustecken inuti). Länk till “Sök mottagning” (länkar till vanliga Hitta vård-söken) separeras från direktlänkarna med ett streck.
Om en länk tar användaren till en extern sida så ska detta framgå.
Tillgänglighet
Allmänt för länkar:
En länk får aldrig vara tom.
Undvik icke-formativa namn på länkar så som:
Klicka här
Här
Mer
Läs mer
Info
Länk
Om det är en externlänk (länk som öppnar nytt fönster eller tab) så ska det finnas en indikation som visar att det kommer hända om man klickar på länken.
Detta kan indikeras med hjälp av en ikon och att lägga till så att skärmläsaren kan berätta att det är en externlänk.Exempelvis:
<a href="https://example.com" target="_blank">
example link
<span class="screen-reader-only">(opens in a new tab)</span>
</a>
Kontrast på text: Se till att liten text har ett kontrastvärde av minst 4.5:1 mot bakgrunden, och stor text minst 3.0:1. Detta gäller även länkar. (Nivå AA)
Kontrast på icke-textobjekt: Grafik, så som ikoner, komponenter och andra informationsbärande grafiska element ska ha kontrast värde på minst 3.0:1. (Nivå AA)
Se till att det går att förstora utan problem: Det ska gå att zooma in mer än 200% utan att text överlappar eller att innehållet blir trasigt. Det ska även gå att förstora texten (dubbelt så stort) utan att innehållet blir trasigt eller överlappande. (Nivå AA)
Använd inte enbart färg för att förmedla information: Använd gärna färg men ha med något mönster eller annan indikation för att urskilja länkar från brödtext. Ex: understrykning eller symbol. OBS! Om det är en länk som går till en extern sida så ska det finnas en symbol som indikerar detta samt att det finns med i beskrivningen för skärmläsare. (Nivå A)
Riktlinje 34
https://webbriktlinjer.se/riktlinjer/34-gor-lankar-och-klickbara-ytor-enkla-att-anvanda-for-alla/ Se till att klickbara ytor inte ligger för tätt inpå varandra. Om en länk har en tillhörande ikon så gör även denna klickbar för att utöka den klickbara ytan. Det går att förstora den klickbara ytan genom att inkludera ett område runt det som är klickbart. I WCAG 2.2 så kommer ett krav på att klickbara ytor ska vara minimum 24×24 CSS-pixlars storlek, detta är inte officiellt satt ännu då WCAG2.2 är ett utkast fortfarande men kan vara bra att ha i åtanke.
Skriv tydliga länkar: Försök i största utsträckning att skriva länktexten så att det går att förstå vart länken leder även om den är tagen ur sitt sammanhang. Undvik att använda ord som “klicka här”, “Läs mer” eller “klicka på denna länk för att..” då detta är underförstått om länken är utmärkt tydligt visuellt och i koden. Användare som använder skärmläsare kan använda sig utav en länklista av sidan och där med få en översikt av de länkar som finns. Om länkarna bara heter “läs mer” eller “klicka här” så säger det inte det så mycket om vad länken kommer ta dom. (Nivå A)
Se till att det går att navigera med tangentbord: Se till att användaren kan nå alla interaktiva element på sidan med tangentbordsnavigering. (Nivå A)
Fokusordning: Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokusbara komponenter få fokus i en ordning som är logisk. (Nivå A)
Tydlig fokusmarkering: Se till att alla interaktiva element som användaren kan tabba till har en tydlig fokusram. Den ska vara minst 3:1 i kontrastvärde. (Nivå AA)
Beskriv det som inte är text: Allt innehåll som inte är text exempelvis en ikon i länktexten ska presenteras för användaren och ska där med ha ett textalternativ (alt=”ett textalternativ”) som förklarar det grafiska objektet. Är det enbart en dekorativbild som inte ger någon form av information så kan en tom alt-text sättas istället. Skulle texten intill ikon redan förklarar ikonen så kan även denna få en tom alt-text då det kan upplevas upprepande för användare med skärmläsare.
Se till att text och maskinläsbara etiketter stämmer överens: Se till att texten som visas i länken/interaktiva komponenten stämmer överens med den maskinläsbara etiketten så det inte uppstår missmatchning för exempelvis användare med röststyrda verktyg.
Feedback
Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad | Jan 18, 2020 |
|---|---|
Senast uppdaterad | Apr 29, 2024 |