Skriv tydliga länkar

Så skriver du tydliga länkar

• Skriv det viktigaste i länken först.
• Skriv länktexten så att det går att förstå vart länken leder även om den är tagen ur sitt sammanhang.
• Placera eventuell beskrivning av länken innan själva länken och i direkt anslutning till länken: i samma mening, stycke, listobjekt eller tabellcell som är nära förknippad med länken.
• Använd samma länktext på en länk om den länken förekommer flera gånger på samma sida.
• Använd gärna den länkade sidans titel eller rubrik som länktext.
• Undvik länktexter som exempelvis ”Läs mer”, ”Klicka här”, ”Gå till”.
• Om en länk innehåller en bild, kontrollera dess textalternativ för att se att den förmedlar länkens syfte.

Länk till annan webbplats

Ange gärna i länktexten vilken webbplats länken leder till, om länken leder till en annan webbplats.

Exempel:

• Hur du ansluter din organisation, hos swedenconnect.se
• Hur du ansluter din organisation (swedenconnect.se)

Länk till dokument

När du länkar till dokument som är i annat format än html, tänk på att ange dokumentets format: pdf, doc eller något annat. Då blir det tydligare att länken inte går till en webbsida.

Exempel:

• Årsredovisning 2022 (pdf)

E-postlänk

Om du väljer att ha e-postlänkar bör du skriva dem så att det tydligt framgår vem som är mottagare av e-postmeddelandet.

E-postlänken bör innehålla e-postadressen till mottagaren, annars kan det vara svårt att förstå vad som händer när man följer länken. När e-postadressen är utskriven i länktexten kan personen antingen kopiera länkadressen och själv välja ett program för att skicka meddelandet eller klicka på länken för att använda ett förvalt e-postprogram.

Exempel:

• anders.andersson@organisation.se
• kundtjanst@organisation.se

Kodexempel för e-postlänkar

Använd mailto-attributet i html-koden för alla e-postlänkar.

Då öppnas ett e-postprogram och ett e-postmeddelande skapas med mottagarfältet förifyllt när personen klickar på länken. Detta förutsatt att personen har en e-postklient installerad och konfigurerad. Om hen inte har en e-postklient installerad eller inte har valt e-postklient brukar de flesta operativsystem fråga vad personen vill göra.

Ska länken öppnas i samma flik eller i en ny flik?

Det är nästan alltid bäst att öppna en länk i samma flik, men det finns undantag.

En rekommendation är att endast öppna den nya sidan i en ny flik om personen exempelvis behöver information från en annan sida för att kunna slutföra uppgiften på sidan hen befinner sig på.

Exempel: Personen ska fylla i ett formulär och behöver hämta information från en annan sida. I det här fallet kan det underlätta för hen att den nya sidan öppnas i en ny flik. Det spelar ingen roll om denna nya sida finns på samma webbplats eller på en annan webbplats.

Risker med att öppna länken i en ny flik

Överväg noga om du behöver öppna sidan i en ny flik. Detta kan skapa onödiga problem för personer som använder sin webbplats:

• Personen är van vid att kunna backa tillbaka till den föregående sidan. Detta är inte längre möjligt när sidan öppnats i en ny flik.

• När du använder attributet target=”_blank” skickar du samtidigt med information om personen till den nya webbplatsen. Var därför försiktig med att öppna länkar i en ny flik om webbsidan på din webbplats hanterar känslig information.
  • Behöver du öppna en ny länk från en sida där personen hanterar känslig information så kan du dölja viss information om hen genom att använda attributet rel="noopener noreferrer", men var medveten om att detta knappast är en säker lösning.
    
    <a href="https://exempel.se/hjalp" target="_blank" rel="noopener noreferrer">när du behöver hjälp</a>

Berätta om länken öppnas i en ny flik

Vill du ändå öppna den nya sidan i en ny flik behöver du informera om detta. Det är viktigt att denna information placeras i slutet av länken, efter själva länktexten.

Lägg till information som text i slutet av länken

<a href=”https//exempel.se/hjalp” target=”_blank”>när du behöver hjälp (öppnas i nytt fönster)</a>

Lägg till en ikon i slutet av länken

Ikonen ska ha information som informerar personer med hjälpmedel om att sidan öppnas i en ny flik.

<a href=”https//exemplel.se/hjalp” target=”_blank”>när du behöver hjälp <img src=”icon.jpg alt=”Öppnas i nytt fönster”></a>

Använd CSS för att lägga till en text

Du kan även använda CSS för att lägga till en text i slutet av alla länkar som öppnas i en ny flik:

a[target="_blank"]::after {
content: " (öppnas i en ny flik)";
}

Använd CSS för att lägga till en ikon

Använd CSS för att lägga till en ikon i slutet av alla länkar som öppnas i en ny flik. Denna ikon innehåller information för skärmläsare som talar om att länken öppnas i en ny flik.

a[target="_blank"]:after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url('new-tab-icon.png') no-repeat;
margin-left: 5px;
}

Alla länkar med target=”_blank” kommer innehålla ikonen ur kodexemplet ovan. För att användare med skärmläsare ska förstå att länken öppnas i en ny flik behöver du informera om det i HTML-koden, till exempel med en aria-label:

<a href="https://example.com Länk till annan webbplats." target="_blank" aria-label="Öppnas i en ny flik: Exempelsida">Besök Exempelsida</a>

Gör det enkelt att ringa upp telefonnummer

Använd standardiserad uppmärkning av telefonnummer. Det kan till exempel göra att användare kan ringa upp ett telefonnummer genom att klicka på det.

Rekommendationer för länkade telefonnummer

• Markera telefonnummer i koden som telefonlänkar (tel:). Det ger möjlighet att direkt ringa upp numret, på samma sätt som e-postlänkar (mailto:) ger möjlighet att skicka e-post.
• Ange det fullständiga telefonnumret, inklusive det internationella prefixet, i länken – även om det nummer som visas på sidan bara innehåller den lokala delen. Då fungerar länken oavsett varifrån personen ringer.
• Överväg att använda strukturerade data även när telefonnummer inte är länkade.

Exempelkod

Följande kod gör telefonnumret till en länk för att ringa upp det direkt:

<a href="tel:+46855050000">08-55 05 00 00</a>

Du kan styra utseendet på länkarna med stilmallar. I exemplet har länken en egen stilmallsklass.

Vissa mobiltelefoner och webbläsare hittar automatiskt sifferkombinationer som ser ut som telefonnummer. De gör det alltså möjligt att ringa ett nummer även utan kodlänkning. Risken är dock att näraliggande siffror, som inte ingår i telefonnumret, ändå tolkas som en del av numret, till exempel ett klockslag. Därför är länkar att rekommendera.

Överväg att använda strukturerad data

Det kan finnas anledning att märka upp telefonnummer – även när de inte är länkade – med metadata som exempelvis attributet itemprop="telephone".

Då kan sökrobotar lättare indexera innehållet och presentera till exempel kontaktuppgifter på ett tydligt sätt. Även andra robotar och ai-system kan, åtminstone i teorin, dra nytta av sådan strukturerad data.

• Uppmärkning av telefonnummer (schema.org) Länk till annan webbplats.
• Test your structured data (google.com) Länk till annan webbplats.

Märk upp inmatningsfält för telefonnummer på rätt sätt

När du gör formulär som efterfrågar telefonnummer är det ofta nödvändigt att märka upp inmatningsfält med uppgift om att det gäller just telefonnummer. Då används attributet autocomplete, med värden som hämtas från en standardlista hos W3C. Detta för att personer ska kunna få bra automatiska förslag av sin webbläsare, och kanske även kognitivt stöd med symboler eller översättningar.

Det kan även vara lämpligt att märka upp inmatningsfält med type="tel" om de efterfrågar telefonnummer. Det är värdefullt inte minst för personer med mobiltelefon, som då kan visa ett särskilt anpassat virtuellt tangentbord som underlättar inmatning av just telefonnummer.

Ingen storleksangivelse behövs för nedladdning

Tidigare rekommenderade vi alltid att ange filstorlek när man laddade ner ett dokument. Detta är numera överflödigt.

• En vanlig webbsida kan "väga" mer än ett enskilt dokument.
• En videofilm som strömmas från till exempel Youtube vara flera hundra megabyte stor.

I inget av dessa fall anges storleken på webbsidan eller hur mycket data det krävs för att titta på en film. Därför finns det ingen anledning längre att ange storleken på de filer som kan laddas ner.