Skrivregler och riktlinjer

Skriv tydliga och informativa länkar. De hjälper läsaren att förstå vad de kan förvänta sig vid klick, vilket minskar förvirring. Dessutom är tydliga länkar bra för sökmotorer.

Länktitel

Observera att du aldrig ska använda ”Länktitel”, eftersom det kan leda till att det blir dubbel uppläsning av skärmläsare.

Öppna i

Lämna fältet för ”Öppna i” tomt. Interna länkar, externa länkar och länkar till pdf-dokument, bilder, filmer etc ska alla öppnas i samma flik. Annars fungerar inte webläsarens backknapp. 

Vid länk till dokument ska filformat skrivas ut:

Dokumentlänk (pdf)

Skriv tydliga länkar som står för sig själv

Man ska kunna förstå vart en länk leder innan man klickar på länken.

Länkar ska kunna förstås utan sitt sammanhang eftersom många besökare letar innehåll genom att hoppa mellan rubriker och länkar och inte alls läser texten.

• Använd nyckelord i länktexten.
• Tänk rubrikform.
• Skriv så att användaren förstår var hen hamnar vid klick på länken.
• Om möjligt, använd målsidans rubrik som länknamn.

Intern eller extern länk?

Eftersom staden har så många olika webbplatser är det ibland otydligt för en besökare att avgöra om hen har hamnat på en ny webbplats eller inte. Det kan också vara svårt för en redaktör att avgöra om en länk ska betraktas som extern eller inte.

• Vi betraktar alla länkar inom multisajten som interna länkar. 
• Länkar till e-tjänster och hittalistningar ska formateras så att de blir knappar.

Länk till annan sida på den egna webbplatsen eller sida inom multisajten:

Öppettider och schema

Länk till extern webbplats (skriv vems webbplats):

Skolverkets webbplats

Länk till undersida på extern webbplats (skriv sidans namn + vems webbplats):

Provdatum för nationella prov, Skolverkets webbplats

Sociala medier

Humlanhusets ungdomsgård på Facebook

Humlanhuset på Instagram: @humlanhuset

Stockholms stad på Linkedin

Länka till dokument på annan aktörs webbplats

Undvik i största möjliga mån att länka direkt till ett dokument som ligger på annan aktörs webbplats. Länka i stället till en sida där dokumentet ligger. Att länka direkt till ett dokument gör att vi blir ansvariga för att dokumentet är tillgänglighetsanpassat, trots att det inte är vi som är avsändare. Att länka direkt till ett dokument är också sårbart, då dokument ofta byts ut och länkar då bryts.

Länkningar direkt till dokument på webbplatser inom staden kan vi vara mer frikostiga med.

Där det inte går att undvika direktlänkning, skriv så här:

Tydligare regler vid konsumentavtal, Riksdagens webbplats (pdf)

Skriv inte …

Följande hjälper inte besökaren på något sätt så undvik detta.

• URL:en som länktext
• Läs mer om …
• Klicka här …
• Mer information om …

Placering av länkar

Länkar inuti brödtext ger sämre läsbarhet och det blir svårt att trycka rätt i mobilen. Lägg länken i ett eget stycke, alltså med en vanlig radbrytning under föregående stycke.

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