Konsten att länka

Länkar, eller hyperlänkar, är en av grundprinciperna för internet. De är så vanliga att vi kanske inte alltid tänker på dem, men för användbarhetens skull finns det en hel att ta hänsyn till. Här presenterar jag viktiga saker att tänka på när du länkar. Råden är, när inte annat anges, hämtade från Vägledningen 24-timmarswebben (pdf 2Mb).

Du får länka

Först, för att rensa alla tvivel – du får länka till vad du vill. Länka mycket och gärna! Jag kan bli irriterad då jag läser artiklar som inte underlättar för användaren att hitta mer information genom länkar, eller inte länkar till källan. Beta Alfa 2.0 skriver att nätet inte är rätt plats för den som ogillar länkar.
Och Fredrik Wackå uppmanar att länka allt vad du kan – den som lägger upp material på nätet måste acceptera att materialet blir länkat till. Länkpolicys eller dyligt är bara löjligt och gammaldags.

Namnge och beskriv länkarna utförligt

Alltför ofta ser man länkar som bara är döpta till “Klicka här” eller “Läs mer”. Detta ger ingen som helst ledtråd om var länken leder. Emil Stenström har behandlat fenomenet i artikeln “Click here to read this article” och pekar ut fler nackdelar med sådan namnsättning:

• Användare tvingas läsa mer än nödvändigt
• Sämre indexeringsmöjligheter för sökmotorer
• Svårare att navigera för användare med skärmläsare

En bra regel är att man ska kunna läsa länken tagen helt ur sitt sammanhang och ändå förstå var den går/vad som händer när man klickar på den.
Förutom en beskrivande länktext kan länken gärna ges en utförligare titeltext. Detta görs med title-attributet på a-taggen. Titeltexten visas i många webbläsare som en liten tool-tip ruta när användaren håller muspekaren över länken.
Om länken öppnas i nytt fönster bör det anges i länktexten. Om du länkar till dokument i andra format än (x)html bör filformatet anges. Om filen dessutom överstiger 1 Mb bör filstorleken stå med i länktexten. Alltså, döp länken till exempel: “Vägledningen 24-timmarswebben (pdf 2Mb, nytt fönster)”.

Utmärk länkar tydligt

Länkar bör – med undantag för menyer – vara understrukna. Hmm… märker själv att jag bryter mot den regeln. Får ändra!
Vidare ska länkarna ha en färg som avskiljer dem från annan text. Man bör även använda olika färger för besökta och icke-besökta länkar, och visa vilken länk som är aktiv. Detta gör man genom s.k. pseudo-klasser i css. Till exempel:
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: magenta;}
a:active {color: red;}
Roger Johansson upplyser om att ordningen är viktig vid specifieringen av länkarnas utseende. Den ska vara :link :visited :hover :active, som förkortat blir “LVHA” eller “LoVe HAte” för den som vill få lättare att komma ihåg.

Gör det enkelt att klicka

Personer med nedsatt finmotorik kan behöva större ytor att klicka på. Sätt därför gärna padding för länkar i ditt css. Om ikoner/symboler används i anslutning till länken ska de också vara klickbara. Om du har flera länkar efter varann bör de skiljas åt med minst ett tecken (gör helst en lista av dem) så att de blir tydligt separerade.

Länkar till andra språk

Tantek visar oss hur länkar till andra språkversioner bör kodas (via anvandbart.se): de ska ha attributen rel="alternate" och t.ex. hreflang="es" för en spansk version.

Länka telefonnummer

Att länka telefonnummer var något helt nytt jag lärde mig när jag läste Vervas vägledning, och något som jag inte sett på så många ställen hittills på nätet. Detta är ett led i att Skype eller någon annan VOIP-klient numer finns på mångas datorer, och att fler surfar med mobilen. Med länkade telefonnummer kan användaren med ett klick ringa upp direkt från webbläsaren! Sättet att koda en länk till ett telefonnummer är t.ex följande: href="tel:+46855050000".

Det var allt – nu är det bara att sätta igång och sprida lite link-love! Nästa vecka skiver jag om användbara url:er, vilket kan vara viktigt om någon vill länka till dig.[tags]användbarhet, webbutveckling, html, länkar, länkning[/tags]

4 kommentarer till “Konsten att länka”

1. lillbra » Blog Archive » Konsten att bli länkad – användarvänliga webbadresser says:

   November 29, 2006 at 8:15 am

   [...] Förra veckan skrev jag om konsten att länka – hur du skriver användbara länkar. I den här artikeln tar jag upp användbara webbadresser, som bland annat underlättar när andra vill länka till dig. Bra webbadresser gör det enklare för dina läsare att hitta, och återkomma, till dina sidor. [...]
2. lillbra » Blog Archive » Länkar överallt och ingenstans says:

   March 2, 2007 at 8:25 am

   [...] Mer om länkning kan du läsa i mitt inlägg Konsten att länka. Här kommer facit till skärmdumparna – länkarna är gulmarkerade. [...]
3. lillbra » Blog Archive » Använda tel eller callto i länkar says:

   July 12, 2007 at 8:19 am

   [...] Som jag nämnde i inlägget Konsten att länka är en av riktlinjerna i Vägledningen 24-timmarswebben att göra det möjligt att ringa upp telefonnummer på sajten. Detta eftersom fler surfar med telefonen och att IP-telefoni blir allt vanligare. Genom att i koden markera telefonnummer som tel-länkar ges möjlighet att direkt ringa upp numret. På samma sätt som e-postlänkar (mailto:) automatisk ger möjlighet att skicka e-post ger telefonlänkar (tel:) möjlighet att direkt ringa upp numret.[…] <a class=”phone” href=”tel:+46855050000″> 08 – 55 05 00 00</a> Vägledningen 24-timmarswebben 5.5.3 Gör det möjligt att ringa upp telefonnummer [...]
4. Länkar du? « SKATANS TANKAR says:

   December 13, 2009 at 9:08 am

   [...] stjärten följer med! « Skatan längtar hem Länkar du? 13 december 2009 Lillbra gör det, Mymlan gör det … och Skatan gör det [...]