Riktlinje nr 5 Prio 1 WCAG nivå A

Skriv tydliga länkar

Utdrag från WCAG-standarden

Riktlinje 2.4 Navigerbart: Tillhandahåll sätt att hjälpa användarna att navigera, hitta innehåll och avgöra var de är.
2.4.4 Syftet med en länk (i sammanhanget): Syftet med varje länk framgår av länktexten i sig själv eller av länktexten tillsammans med sitt automatiskt tydliggjorda länksammanhang, utom då syftet med länken skulle vara tvetydigt för användare i allmänhet. (Nivå A)

WCAG (Web Content Accessibility Guidelines) 2.0 är den standard som bland annat webbdirektivet bygger på. Se även webbriktlinje R1. Följ WCAG 2.0 nivå AA.

Utdraget kommer från en översättning och kan innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).


2017-09-20: Resterande del av sidan är ett utkast. Syftet är att underlätta tillämpning av WCAG. Förbättringsförslag efterlyses. Kommentera gärna med hjälp av kommentarsfunktionen sist på sidan eller i Facebookgruppen webbriktlinjer eller med epost till info@webbriktlinjer.se.


Vad betyder det här?Länk hit

Tydliga länkar underlättar för alla, men är särskilt viktigt för personer som använder vissa hjälpmedel. Skärmläsaranvändare kan till exempel välja att navigera genom att enbart läsa upp länkarna på en sida, och för användare med nedsatt motorisk förmåga kan varje interaktion kräva mycket tid eller energi.

Hjälp därför användarna genom att låta syftet med varje länk vara så tydligt att användaren kan avgöra om hen ska följa länken eller inte. Försök, om det är möjligt, att skriva länktexten så att det går att förstå vart länken leder även om den är tagen ur sitt sammanhang.

I vissa situationer passar det bättre att placera en del av beskrivningen av länkens syfte i den omgivande texten än att ha en fullständig beskrivning i själva länktexten. Försök så långt det är möjligt att ge användaren en chans att förstå vart länken leder utan att flytta fokus från själva länken. Det uppnår du genom att placera beskrivningen 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. Ett annat alternativ är att använda WAI ARIA-teknik för att ytterligare förknippa text med länken.

Exempel när länken beskrivs i den omgivande texten:
En lista över rapporter där varje rapport finns i tre format; html, pdf och mp3 (inspelning). I det här fallet är det onödigt att upprepa titeln på rapporten i varje länk utan låt den första länken tala om titeln och låt de övriga länkarna vara “pdf” och “mp3”.

Exempel lista med rapporter:

Rapport html-version Pdf-version för nedladdning Mp3 för uppspelning
Granskningsrapport om tillgänglighet Pdf (2 MB) Mp3 (57 MB)

Formulera länktext med omsorgLänk hit

  • Länka ord som säger något om vart länken leder. Skriv hellre ”Information om nätverksträffen” än ”För information om nätverksträffen, klicka här”. Användare vet att det går att klicka på länkar, det behöver du inte tala om. Av samma anledning är det onödigt att inleda länkar med sådant som ”Läs mer om …” och ”Gå till …”
  • Skriv det viktigaste i länken först.
  • Använd en och samma länktext för alla länkar som leder till samma sida. Och omvänt: Låt inte länkar på samma sida med samma länktext leda till olika sidor. Ett vanligt exempel är ”Läs mer”-länkar som upprepade gånger används i listor med nyhetspuffar på en och samma sida. Ett alternativ är att istället skriva ”Fler nyheter”, ”Fler erbjudanden” eller något liknande.
  • Använd gärna den länkade sidans titel och/eller rubriktext som länktext. Detta förutsätter en tydlig och informativ rubrik. (Se även R135 Skriv beskrivande sidtitlar.) Om du inte kan använda samma länktext som i rubriken, se till att länktexten och rubriken skiljer sig så lite åt som möjligt. Risken är att besökarna annars tror att de hamnat på fel sida.(Se R61 Skriv tydliga och berättande rubriker.)
  • Om du i länktexten vill ange att länken går till en annan webbplats kan du skriva ut organisationens eller webbplatsens namn i slutet av länktexten, till exempel:
    Information om barns hälsa på Sjukvårdsrådgivningens webbplats.
    Regler för kontroll av livsmedel hos Livsmedelsverket.


Låt sammanhanget och syftet med länken avgöra om den exempelvis ska placeras i brödtexten eller utanförLänk hit

Det finns både fördelar och nackdelar med att lägga länkar i brödtexten, liksom med alternativet att lägga dem separat, t.ex. i en punktlista efter texten eller mellan textblock. Här är några exempel:

Fördelar med länkar i brödtext

  • Det blir tydligt vilken länk som knyter an till vilken del av texten.
  • Användare kan missa att det erbjuds möjlighet till fördjupning om länkarna ligger separat. Detta är särskilt relevant när länken går till en ordförklaring.
  • Det blir möjligt för skribenten att direkt i texten antyda vad som är egna påståenden och vad som baseras på källor.
  • Genom att markera eller följa länken kan användaren direkt under läsningen få hjälp att bedöma referensens värde och relevans. Ibland räcker det att undersöka vems adress länken leder till.

Bokstavsförkortningen ”ht” i webbstandarderna html och http står för hypertext, som betyder just text med länkar. Detta stycke är ett exempel på hypertext. Hypertextens popularitet var en av anledningarna till webbens genombrott. Men det är inte alltid optimalt att ha länkarna inbakade i texten.

Nackdelar med länkar i brödtext

  • Framför allt handlar det om att läsbarheten blir sämre.
  • En separat länklista kan bli överskådlig på ett annat sätt än en brödtext med infällda länkar.
  • Avsändaren riskerar att tappa läsare innan texten hunnit ”tala till punkt”, det vill säga att användaren följer länken omedelbart och missar en del av budskapet.
  • I löpande text är det ofta svårt att formulera länktexter som beskriver länkmålet på ett rättvisande sätt utan att bli krystade.

Ofta fungerar det bra att lägga länkar omedelbart efter ett textavsnitt, vilket exemplifieras här. Om det är fler än en länk så kan det bli tydligare med en punktlista.

Det finns en risk – framförallt i brödtext, men även i listor – att länkar hamnar så nära varandra att vissa användare av misstag väljer fel länk. Läs mer om utformning av länkar i R34. Gör länkar, klickbara ytor och menyer användbara för alla.


Länkar till dokumentLänk hit

När du länkar till dokument som är i annat format än html, tänk på detta:

  • Ange dokumentets format: pdf, doc eller något annat. Då blir det tydligare att länken inte går till en webbsida.
  • Filens storlek bör framgå av länktexten. Då kan besökarna lättare avgöra hur lång tid det tar att ladda ner dokumentet.

Se även R9. Ge dokument filnamn som beskriver innehållet.

Tidigare har denna riktlinje förespråkat att dokument ska öppnas i nya fönster. Efter omfattande diskussioner om argument för och mot att öppna länkar i nya fönster/flikar har vi valt att ta bort den rekommendationen. Däremot kan sidor som kodas med html5 med fördel använda attributet download när avsikten är att det länkade dokumentet ska sparas snarare än öppnas för visning.

Kodexempel:
<a href="rapport.pdf" download>Ladda ner rapporten</a>


E-postlänkarLänk hit

Om du väljer att ha e-postlänkar (se avsnittet E-postlänk eller kontaktformulär? i R5. Gör det lätt att komma i kontakt med er) 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 för användaren att förstå vad som händer när man följer länken. (WCAG 2.0 3.2.2 säger att förändring av sammanhang, t.ex. öppning av e-postprogram, bara får göras om användaren kan förvänta sig det.)

E-postadresser med tydliga mottagare är till exempel anders.andersson@organisation.se eller kundtjanst@organisation.se (se R41. Använd funktionsbrevlådor). När e-postadressen är utskriven i länktexten kan användaren 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.

Ett argument för att inte skriva ut e-postadresser på webbsidor (synligt eller i kod) är att adresserna då kan fångas upp av robotar och hamna i adresslistor för skräppost. Vanliga försök att minimera den risken är att skriva ut e-postadresser som bilder, byta ut @-tecknet eller skriva ut adressen med JavaScript. Det finns dock ingen garanti att dessa lösningar fungerar, och de försämrar ofta både tillgängligheten och användbarheten, till exempel eftersom skärmläsare inte läser upp bilder som saknar alternativtext. Om det inte finns särskilt starka skäl bör sådana lösningar därför undvikas. Ett modernt och uppdaterat skräppostfilter brukar räcka.

Ibland är det nödvändigt att komplettera e–postadressen med annan text för att syftet med länken ska bli tydligt för användaren. Ett exempel är om webbsidan informerar om ett evenemang och syftet med länken är att användaren ska anmäla sig. Då är inte länktexten ”anders.andersson@organisation.se” längre tydlig utan behöver kompletteras med exempelvis: ”Skicka e-post till anders.andersson@organisation.se för att anmäla dig.”

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 användaren klickar på länken. Detta förutsatt att användaren har en e-postklient installerad och konfigurerad. Om användaren inte har en e-postklient installerad eller inte valt e-postklient brukar de flesta operativsystem fråga vad användaren vill göra.

Kodexempel 1: <a href="mailto:info@organisation.se">info@organisation.se</a>

Kodexempel 2: <a href="mailto: ...">Skicka e-post till anders.andersson@organisation.se för att anmäla dig till evenemanget</a>

Det finns flera parametrar som kan användas för e-postlänkar för att fylla i information i förväg i e-postmeddelanden:

  • subject anger meddelandets ämnesrad
  • body anger själva meddelandetexten
  • cc anger synlig mottagare av kopia
  • bcc anger för mottagare osynlig mottagare av kopia

Kodexempel 3: <a href="mailto:info@organisation.se?subject=Fakturafråga&cc=forsaljning@organisation.se">Skicka fakturafrågor till oss på adressen info@organisation.se</a>


Relaterat: Följ riktlinjer om utformning och interaktionsdesign för länkarLänk hit

Det är inte bara länktextens formulering som avgör hur väl en länk fungerar, utan även formgivning och interaktionsdesign.
Länkar (även till andra webbplatser) ska till exempel endast undantagsvis öppnas i nytt fönster. Se R97. Låt bakåtknappen fungera.
Se R34. Gör länkar, klickbara ytor och menyer användbara för alla.


Mätbarhet: lyft länken ur sitt sammanhangLänk hit

Testa att läsa varje länk lyft ur sitt sammanhang. Går det att förstå vart länken leder enbart med hjälp av länktexten?


Exempel på tydliga länkarLänk hit

Länktexter: "Ring supporten 08-12313500" och "Maila supporten" (med ikon som visar att länken öppnas i annat fönster)

1177 Vårdguiden har bra exempel på länkar till både telefonnummer och e-post.


TerminologiLänk hit

Skräppost kallas på engelska för spam eller ”junk mail”.



Kommentarer (17)

  • Cook Sedorics skriver:

    Ingress och första stycket är identiska.

    • BjornHagstrom skriver:

      Ja vi har ingressen dubblerad på många ställen. Jag tror det är en missuppfattning från förstudien. Vi ska kika på det.

  • Anna skriver:

    Missat en bokstav – ska nog vara kan – istället för an: "För personer som använder hjälpmedel an det vara"

  • @bjornhagstrom skriver:

    En diskussion som dyker upp då och då är länkar i brödtext och en hel del har uppfattningen att FunkaNu avråder från detta. En diskussion på twitter tydliggör deras ståndpunkt: http://bjorn.hagstrom.nu/2013/10/24/om-funkanu-oc

  • Kristin Aastrup skriver:

    Jag undrar vad som gäller nu för tiden om att länka i texten till en sida som redan syns i menyn.

    • webbriktlinjer skriver:

      Hej Kristin. Att lyfta fram särskilt relevanta länkar i en text, även om de också finns i menyn, är en tidsbesparande service som underlättar navigation. Men det ska inte gå till överdrift förstås. Syftar du på någon tidigare rekommendation? Kan du utveckla ditt resonemang?

  • asdf skriver:

    Använd aldrig title-texter till något. Fungerar inte med pekskärmar eller med exempelvis tangentbordsnavigation.

  • LindaE skriver:

    I vilken typ av texter kan det vara användbart med länkar i brödtext, och för vilken typ av målgrupp?

  • Lars skriver:

    Här står det att länkar till dokument ska öppnas i nya fönster. Stämmer det fortfarande, är det inte användarens val?

    Kanske borde det också stå tydligt någonstans att URL inte är tillräckligt som länktext. Alltså i stil med, ”Du kan se detta på deras webbplats http://www.platsen.se

  • Sofia Lindow skriver:

    Hej!
    Undrar vad som är bäst, ur ett tillgänglighetsperspektiv (det gäller alltså länk till dokument, huruvida man ska ange pdf eller Acrobat Reader) i länknamnet:

    • Verksamhetsberättelse 2016 (pdf, 288 kb, nytt fönster)
    • Balans- och resultaträkning 2016 (xls, 14 kb, nytt fönster)

    eller

    • Verksamhetsberättelse 2016 (Acrobat Reader, 288 kb, nytt fönster)
    • Balans- och resultaträkning 2016 (Excel, 14 kb, nytt fönster)

    • Pär Lannerö skriver:

      När det gäller pdf skulle jag inte förespråka att skriva Acrobat reader, eftersom det även finns andra program som kan presentera det formatet. Förkortningen pdf är tillräckligt känd för att klara sig bra på egen hand, i alla fall i visuell presentation. För att uppläsning i skärmläsare ska låta vettigt kan det vara lämpligt att ange ”portable document format”, förslagsvis med hjälp av abbr i html-koden.

      De filformat som hör till Microsoft Office kallas ju ofta för t.ex. ”wordfil” eller ”excelformat” eller liknande. För att vara konsekvent skulle jag föreslå en motsvarande lösning här: visuellt presenteras docx/ppt/xls men förklara innebörden i läsbara ord med hjälp av abbr.

  • Sofia Lindow skriver:

    Arbetar med en webblats som har typ ”alla” som målgrupp. Undrar över formuleringen ”Länkar i brödtexten minskar alltid läsbarheten, men kan vara användbara i vissa texter, för vissa målgrupper eller om redaktören vill uppnå vissa mål.”

    Kan du ge exempel på vad ”vissa texter, för vissa målgrupper eller om redaktören vill uppnå vissa mål.”?

    Om man har ”alla” som målgrupp kan man då landa i att det faktiskt ”vissa texter, för vissa målgrupper eller om redaktören vill uppnå vissa mål” nog inte gäller oss?

    • PTS-bloggen skriver:

      Tack Sofia för bra frågor!
      Nu finns ett aningen mer utförligt stycke om just denna fråga, som utkast infogat i denna riktlinje.
      Se https://webbriktlinjer.se/r/5-skriv-tydliga-lankar/#brodtext och kommentera gärna igen!

    • Anna Hass skriver:

      Det är snarare sidans syften som ska styra var du sätter länkarna. Antingen är sidan främst orienterande, dvs. du vill att läsaren SKA klicka sig vidare när de hittar rätt länk, och då ska länkarna komma direkt. Eller så är sidan främst informerande, dvs. du vill göra det så lätt som möjligt att läsa sig rakt igenom hela sidan. Då ska du inte bryta av den med länkar.

  • Anna Hass skriver:

    Ändra exemplen, snälla … ordet ”information” ska ca aldrig användas, och det ska absolut inte stå med i en länk, och det ska absolut inte vara första ordet i en länk.