Riktlinje nr 5 Prio 2

Skriv tydliga länkar

Skriv länkarna så att användarna förstår vart länken leder även när den är lyft ur sitt sammanhang. På webben skummar vi ofta igenom information och blicken fastnar på avvikelser såsom rubriker, markerade ord och länkar. Tydliga och informativa länkar gör att besökarna snabbare hittar den information de söker.

Om denna riktlinje Länk hit


Rekommendationer för länktexterLänk hit


Tydliga länkar är särskilt viktigt för personer som använder någon form av hjälpmedel för att surfa på webben, till exempel skärmläsare, eftersom de kan välja att navigera genom att enbart läsa upp länkarna på en sida.

Tänk på detta för att skriva tydliga länkar:

  • 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.
  • Skriv det viktigaste i länken först.
  • Undvik att inleda länkar med sådant som ”Läs mer om …” och ”Gå till …”. Det är underförstått och därför onödig information.
  • Låt inte flera länkar på samma sida med samma formulering leda till olika sidor. Ett vanligt exempel på detta är ”Läs mer”-länkar som upprepande gånger används i listor med nyhetspuffar på en och samma sida. Ett alternativ är att i stället skriva ”Fler nyheter”, ”Fler erbjudanden” eller något liknande.
  • Använd en och samma länktext för alla länkar som leder till samma sida.
  • Använd den länkade sidans rubriktext som länktext. Detta förutsätter en tydlig och informativ rubrik. (Se R61 Skriv tydliga och berättande rubriker.) 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.
  • Använd länkar i brödtext med förnuft och utifrån målgruppens förutsättningar.

Det är inte bara länktextens formulering som avgör hur väl en länk fungerar, utan även länkens utformning och kod. Se R34. Gör länkar, klickbara ytor och menyer användbara för alla.



Länkar i brödtext – UTKASTLänk hit


2017-05-04: Obs! Detta avsnitt är ett utkast. Synpunkter välkomnas. Antingen i kommentarsfältet eller per epost till info@webbriktlinjer.se, eller i Facebookgruppen Webbriktlinjer.
2017-05-05: Utkast uppdaterat efter synpunkter från Björn Hagström, Elisabeth Toftén, Pontus Vinderos, Sofia Lindow, Tomas Johansson Haavik och Hans von Axelson

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.

Ta hänsyn till användningssammanhanget, fördelar och nackdelar när ni väljer hur länkar ska utformas och placeras. 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”.
  • I löpande text är det ofta svårt (eller ibland omöjligt av t.ex. juridiska skäl) att formulera länktexter som beskriver länkmålet på ett rättvisande sätt utan att bli krystade. (WCAG 2.0 kriterium 2.4.4 säger att ”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”. Det kursiverade uttrycket betyder omkringliggande text eller t.ex. rubrik för aktuell kolumn om länken ligger i en tabell.)

Ofta fungerar det bra att lägga länkar omedelbart efter ett textavsnitt, vilket exemplifieras här.

WCAG 2.0 kriterium 2.4.4
En studie från universitetet i Hamburg visar att länkar i brödtext minskar läsbarheten. (pdf, 276kB)

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


2017-05-15: Revidering av detta avsnitt planeras, när referensgruppen fattat beslut. Ett blogginlägg beskriver olika argument för och mot att öppna länkar i nya fönster/flikar.

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.
  • Dokument som inte är en webbsida ska öppnas i nytt fönster.
  • Det ska vara tydligt om länkar öppnas i nytt fönster. Skriv gärna ut detta som en del av länktexten, så att det blir tydligt även för besökare som använder skärmläsare. Med hjälp av script kan informationen bytas ut mot en tydlig ikon.


Länkar till andra webbplatserLänk hit


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änkar till andra webbplatser ska inte öppnas i nytt fönster. Se även R97. Låt bakåtknappen fungera.


E-postlänkarLänk hit


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 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. 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>

E-postlänk eller kontaktformulär?

Fördelen med e-postlänkar är att de är enkla för användaren att använda och att de inte ställer krav på vilken information användaren måste lämna. Nackdelen är att e-postlänkar kräver att användaren har en e-postadress och en e-postklient installerad i systemet, eller webbmejl, för att skicka meddelanden. En annan nackdel är att det är svårt att styra vilken information som användaren ska ange i meddelandet. Om du behöver sådana styrmöjligheter kan det istället vara bra med ett formulär.

Genom att använda ett formulär på sidan kan du vägleda användaren och bestämma vilken information användaren ska lämna. Informationen som användaren lämnar kan också automatiskt granskas (valideras) av systemet innan den skickas iväg till servern. Valideringen kan till exempel säkerställa att fält för siffror innehåller rimliga siffror och inte andra tecken, eller att angivna postnummer och datum faktiskt existerar. Detta ökar kvaliteten på informationen vilket i sin tur kan minska svarstider och kostnader för handläggning. En annan fördel med formulär är att det går att skicka meddelanden via ett formulär utan krav på särskild programvara eller personliga e-postklienter. En nackdel är att användare kan uppleva att det är krångligt att fylla i formuläret. Det finns fler rekommendationer för hur formulär bör utformas på annan plats i Vägledningen.

Genom att erbjuda både en e-postlänk och ett formulär kan ni låta användarna själva välja hur de vill kontakta er.


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: tydliga länkarLänk hit

På Göteborgs stads webbplats finns både e-postadress och kontaktformulär i sidfoten. Det finns också e-postbrevlådor för olika områden, så kallade funktionsbrevlådor, som gör det tydligare vem som är mottagare av informationen.


TerminologiLänk hit


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



Kommetarer (15)

  • 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?