Skriv tydliga länkar som visar vad användaren kan förvänta sig vid klick. Det hjälper användaren att navigera och förbättrar sökmotoroptimeringen. Länkar ska alltid vara klickbara eftersom det förväntas av en länk.
Placera länkar i eget stycke
Placera inte länkar i löpande text eftersom de kan vara svåra att klicka på, särskilt på mobilen, och göra sidan svårläst. Undvik även länkar i punktlistor av samma anledning. Ge varje länk ett eget stycke, oavsett om länken leder till ett dokument eller en annan sida. Så här:
Bilder
Formatera text
Kommunikataionsprogram för Stockholms stad (pdf)
Ett undantag från ”eget stycke” är när vi anger kontaktuppgifter, så här:
Kommunstyrelsen
E-post: kommunstyrelsen@stockholm.se
Växel: 08-508 29 000
Skriv självförklarande länkar
Länkar ska vara tydliga och självförklarande, så att användaren förstår vart de leder utan att läsa texten runtom. Använd nyckelord eller målsidans rubrik som länktext, eftersom många skummar mellan länkar och rubriker för att hitta rätt.
Så skriver du tydliga länkar:
- Skriv det viktigaste först i länken.
- Gör länktexten tydlig och informativ.
- Använd samma länktext om länken förekommer flera gånger på sidan.
- Använd dokumentets eller målsidans rubrik som länktext när det är möjligt.
- Undvik länktexter som ”Läs mer”, ”Klicka här”, ”Gå till” och ”Mer information om”.
Ibland är det svårt att få med allt i länken. Förklara då i stycket före länken.
Formulera länkar utifrån deras mål
För länkar inom en sajt (till exempel sajten Förskola) och mellan olika sajter inom multisajten används rubriken på målsidan som länktext. Samma princip gäller när du länkar mellan olika sidor på intranätet (se även särskilda exempel för länkar på intranätet). Exempel:
Beräkna avgift för förskola
Länk till startsidan på en extern webbplats (skriv vems webbplats):
Skolverkets webbplats
Länk till undersida på extern webbplats (målsidans rubrik + vems webbplats):
Provdatum för nationella prov, Skolverkets webbplats
För intranätet
Länk till multisajten .stockholm
Multisajten .stockholm består av flera webbplatser, som start.stockholm, förskola.stockholm och bygglov.stockholm. De har olika namn, men de kommer alla från samma avsändare – Stockholms stad.
Länk till startsidan (start.stockholm) skrivs så här:
Stockholms stads webbplats
Länk till undersida om avgifter för förskola på webbplatsen för förskola skrivs så här:
Avgifter för förskola, Stockholms stads webbplats
Länk till samarbetsytor
Behandla länknamnet som en vanlig länk, men se till att sammanhanget visar att det handlar om en samarbetsyta.
Kompetensbaserad rekrytering
Om det är svårt att förklara i texten innan länken att den går till en samarbetsyta, kan du inkludera det i länknamnet.
Länk till Teams
Pedagogiska verksamheter använder ibland Teams för stödmaterial. Beskriv i texten att materialet finns på Teams, men nämn inte Teams i länknamnet.
Länk till Esmaker eller liknande
När du länkar till anmälningsformulär som Esmaker, skriv en uppmanande länk utan att nämna Esmaker i länken.
Anmäl dig till seminariet xxx
Länk till utbildning på utbildningsplattformen
För att förbereda användaren på att länken leder till en e-utbildning, börja med en kort förled. Skriv sedan namnet på utbildningen.
E-utbildning: Informationssäkerhet för medarbetare i staden
Länk till supportguider
För att förbereda användaren på att länken går till en supportguide, börja med en kort förled. Skriv sedan namnet på supportguiden. Om namnet är krångligt, skriv om det till något tydligare.
Supportguide: Anslut en Iphone/Ipad till det trådlösa nätverket BYOD
Länka till dokument
Använd dokumentets titel och ange filformat när du länkar till ett dokument. Om titeln är krånglig, skriv om den till något tydligare.
Kommunikataionsprogram för Stockholms stad (pdf)
Presentation Stockholms stads kommunikationsprogram (pptx)
Central anskaffning anmälan och riskbedömning (docx)
Undvik direktlänk till dokument på andra webbplatser
Undvik att länka direkt till dokument på andra webbplatser än stadens egna. Länka i stället till den sida där dokumentet finns. Direktlänkar gör oss ansvariga för att dokumentet uppfyller tillgänglighetskrav, även om vi inte äger det. Dessutom kan direktlänkar sluta fungera om dokumentet byts ut.
Inom stadens egna webbplatser kan du länka direkt till dokument oftare.
Om direktlänkning inte går att undvika, formulera länken så här:
Tydligare regler vid konsumentavtal, Riksdagens webbplats (pdf)
Formatera länkar
Använd rätt stilmall (formatmall) för varje typ av länk, som till exempel länkar till sidor, dokument eller e-tjänster. På miniwebbar finns endast Länk till sida och Dokumentlänk, av de som listas nedan.
Länk till sida
Formatera text
Primär länk
Tänk ”call to action” och använd det gärna på anmälningslänkar och liknande.
Anmäl dig till seminariet xxx
Dokumentlänk
Central anskaffning anmälan och riskbedömning (docx)
Länk till Hitta-listning
Hitta förskola
Länk till e-tjänst
Förskola och fritidshem
Länk till e-post
Länkar till e-postadresser blir automatiskt understrukna, och du behöver inte lägga till någon extra stilmall.
E-post: redaktion@stockholm.se (oformaterad länk)
Redigera länk
Töm fältet för länktitel
Använd inte ”Länktitel” eftersom det skapar problem för skärmläsare. När du länkar till en sida eller ett dokument genom att dra in det till satsytan, fylls fältet för länktitel automatiskt med namnet. Om fältet är ifyllt, läser skärmläsaren både länkens namn och länktiteln, vilket blir onödigt. Töm därför alltid detta fält. För att göra det, placera markören på länken och välj ”Infoga/redigera länk”. Töm fältet Länktitel och spara.
Länkar öppnas i samma flik
Ska länkar öppnas i samma flik eller i en ny flik? I de flesta fall är det bäst att öppna länkar i samma flik, så att användaren enkelt kan använda bakåtknappen för att gå tillbaka. Endast i undantagsfall, när användaren behöver information från en annan sida för att slutföra en uppgift, bör länkar öppnas i en ny flik.
Exempel:
Om en person fyller i ett formulär och behöver information från en annan sida, kan det vara bra att öppna länken i en ny flik.
Som standard öppnas länkar i samma flik, så du behöver oftast inte göra något när du skapar länkar. Om du vill ändra detta, justera inställningen under ”Infoga/redigera länk” och välj ”Öppna i”. Välj ”Öppna i en ny flik eller fönster”.
Informera användaren om länken öppnas i en ny flik. Ange informationen i slutet av länken, efter länktexten. Lägg till: (nytt fönster).
Sociala medier
Ibland kräver sammanhanget att det tydligt framgår vilket konto i sociala medier länken leder till. Skriv då så här:
Seniorhälsan Hägersten-Älvsjö på Facebook
Humlanhuset på Instagram: @humlanhuset
Stockholms stad på Linkedin
Om det är tydligt vem avsändaren är och vilket konto som avses, använd en enklare formulering med rubriken ”Följ oss” eller ”Följ oss på sociala medier” och lägg sedan till länk till respektive plattform.
Facebook
Instagram
Film
Stadens egna filmer ska finnas i Mediaflow. Huvudprincipen är att vi använder inbäddningskoden för filmen så att den spelas upp direkt på webbsidan. Se redaktörsmanualen för instruktioner.
Vill du länka i text i stället, gör så här:
Digital visning av förskolan Flyttfågeln
Om du länkar till en betrodd aktörs film på Youtube, ange avsändaren och att filmen finns på Youtube.
Vad är offentlig upphandling? Film från Upphandlingsmyndigheten, Youtube
Tydliga rubriker gör sidorna lättare att läsa och förstå. De hjälper läsaren att snabbt få en uppfattning om innehållet. Det är också viktigt att använda rätt rubriknivåer för att visa hur rubrikerna hänger ihop.
Korrekta rubriknivåer på webben är viktiga av flera skäl:
- Tillgänglighet: För användare som använder skärmläsare, som synskadade, gör rätt rubrikstruktur det lättare att navigera och förstå innehållet.
- SEO (sökmotoroptimering): Sökmotorer använder rubriknivåer för att förstå sidans struktur och innehåll. En välstrukturerad sida kan ranka bättre i sökresultat.
- Läsbarhet: En tydlig rubrikstruktur hjälper alla användare att snabbt hitta och förstå innehållet, vilket förbättrar användarupplevelsen.
I kodningen av en webbsida benämns huvudrubriken som H1, och H2–H6 används för att dela upp och strukturera underliggande innehåll i olika nivåer.
På våra plattformar ser det lite annorlunda ut. På den externa webben (inom .stockholm) och intranätet kallas rubrikerna Mellanrubrik 2–4. På miniwebbarna kallas de Rubrik 2–4.
Så även om de har olika namn i olika system, fungerar de alla på samma sätt som H2–H4 i koden för att skapa en hierarkisk struktur.
Använd rubrikformat – undvik fetstil för struktur
Formatera rubriker som rubriker, inte bara med fetstil. Fetstil fungerar inte i koden och ger ingen tydlig struktur för skärmläsare eller sökmotorer.
Hoppa aldrig över nivåer
Den första mellanrubriken på en sida ska alltid vara en Mellanrubrik 2. Det innebär att du inte kan börja med Mellanrubrik 3 eller 4, eftersom rubrikerna måste följa en logisk ordning för att behålla en tydlig struktur.
Läs även
Du kan läsa mer om hur du skriver rubriker på intranätet.
Skrivregler och klarspråk – skriv för att nå fram, Stockholms stads intranät
Personer som har nedsatt syn ska också kunna förstå bilder och annat grafiskt innehåll. En alternativ text (alt-text) läses upp för de som använder ett uppläsande hjälpmedel som till exempel en skärmläsare. Alt-texten används också om sidan av någon anledning inte laddar in bilden.
Innehållsbärande bilder ska ha en alt-text. Alt-texten ska förmedla bildens budskap och är alltså inte ”bara” en redovisning av bildens komponenter och vad den föreställer. En alt-text skrivs alltid utifrån sitt sammanhang – då det är just budskapet som ska fram.
När ska jag skriva en alt-text?
- Tänk dig att du läser upp en webbsida för någon annan över telefon. Förmedlar bilden något ”eget”, som inte framgår av den övriga texten? Om du tar bort bilden, kommer någon information att gå förlorad? Är svaret ja, skriv en alt-text.
- Finns det inget viktigt att säga om bilden – var tyst. Bilder eller grafiska element som har en dekorativ funktion klarar sig bäst utan alt-text. Lämna alt-texten tom.
Så här skriver du en alt-text
- Som alltid, börja med det viktigaste.
- Det finns ingen strikt maxlängd för alt-text, men det rekommenderas att hålla den kort och tydlig – gärna under 125 tecken. Skärmläsare kan ibland avbryta längre texter, och för långa alt-texter kan vara svårare att förstå. Huvudmålet är att beskriva bildens budskap så kortfattat och informativt som möjligt.
- Tänk dig att du ska formulera budskapet i bilden för någon som inte kan se den. Prova gärna att blunda när du ”provtrycker” din text. Får du fram budskapet?
- Om en bild innehåller text kan texten i bilden oftast användas rakt av, när du skriver alt-texten. Men upprepa inte ett innehåll som redan står i den omgivande brödtexten. Bilder som innehåller text ska dock undvikas så långt det är möjligt.
- Skriv inte ”Bild av …”. Det tar skärmläsaren hand om.
- Kolla att alt-texten inte blir en upprepning av en bildtext, lämna i så fall alt-texten tom.
- Avsluta med punkt. Det ger en liten paus i uppläsningen.
Grafer och diagram
- Om grafen har en benämning, skriv in den i alt-texten (t.ex. ”Figur 3.3”). Detta gäller främst för grafer och diagram i dokument, då vi sällan har liknande referens på en webbsida.
- Är bilden ett diagram, graf eller illustration, skriv vilken typ det är: ”Stapeldiagram som visar ...” eller ”Illustration över ...”
- För omfattande diagram – sammanfatta och bidra gärna med en slutsats. Exempel: Stapeldiagram över befolkningsökning i Stockholms stad 1990–2020. Stadsdelen x har ökat mest med y procent.
Vanliga fel i Diggs granskningar
Myndigheten för digital förvaltning (Digg) nämner några vanliga fel med alt-texter som de upptäcker när de granskar webbplatser:
- Det saknas textalternativ.
- För lite text till komplex bild.
- För mycket text när bilden egentligen är dekorativ.
- Felaktig beskrivning av vad bilden förmedlar.
- Onödig information i textalternativet.
Textalternativ för bilder – information när inte bilden kan visas, Diggs webbplats
