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
Länklista
Flera länkar kan sättas samman för att bilda exempelvis en länklista.
.png?version=1&modificationDate=1656935358493&cacheVersion=1&api=v2)
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
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)
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 |
|
|---|---|
Senast uppdaterad |
|