Så skriver du för webben
Det finns en del saker att tänka på när man skriver för webben. Här finns konkreta tips och riktlinjer.
Inledning och ingress
Den viktigaste informationen ska alltid vara högst upp. Inledningen ska vara rakt på sak. Tänk även på att inledningen ska nämna ord som användare söker på. Det gör sidan lättare att hitta vid sökningar.
Riktlinjer för inledning och ingress
- Inledningar på webbsidor ska vara formaterade som brödtext.
- Inledningar på webbsidor ska aldrig vara fetstilta.
- Formateringen "nyhetsingress" får endast förekomma i nyhetsartiklar, inte i korta meddelanden eller på fasta sidor.
- Formateringen "inledning på genomgångssida" får endast förekomma på genomgångssidor.
Rubriker
Rubriker ger användaren en överblick av sidan. Rubrikens syfte är att hjälpa användaren att förstå vad sidan handlar om. En välformulerad rubrik gör dessutom att sidan hamnar högt upp på sökomotorernas träfflistor.
Riktlinjer för rubriker
- Rubriker ska vara tydliga och beskrivande.
- Använd nyckelord från texten i rubrikerna.
- Använd underrubriker. Dela upp texten i mindre delar och sätt underrubriker. Det hjälper användaren att få en överblick och snabbt hitta rätt.
- Rubriker får inte vara för långa. I textmoduler, meddelanden, nyheter och evenemang: Max 65 tecken.
- Det är inte tillåtet att feta eller kursivera rubriker. Det skapar felaktiga taggar i html-koden vilket gör den otillgänglig.
- Rubriker ska vara formaterade som rubriker: rubrik 1 (h1), rubrik 2 (h2) osv. Rubriknivåerna finns i html-koden. Rubrik 1 får en tagg som heter h1, rubrik 2 blir h2 osv. Skärmläsare använder html-koden för att läsa webbsidor. Om rubrikerna har felaktig formatering blir sidan omöjlig att överblicka för personer som inte kan se sidan och är beroende av skärmläsare.
- Rubriknivåerna ska återge strukturen på sidan korrekt. En h2-rubrik ska vara underrubrik till närmaste h1 och h3 ska vara underrubrik till närmaste h2. Om rubriknivåerna inte har angetts korrekt kommer Sitevisions automatiska tillgänglighetskontroll varna. Du hittar den högst upp till höger (den runda ringen med en figur i)
Gruppera information
Du underlättar för användaren att hitta rätt om du delar upp innehållet i mindre grupper. Gör dessa grupper logiska för användaren.
Exempel på gruppering av information
Säg att användaren Anna som är anställd på universitetet vill ta ledigt för studier. När Anna hittar sidan som handlar om ledighet kommer hon att söka med blicken efter den del som handlar om studieledighet. Om Anna är blind kommer hon att låta skärmläsaren läsa upp rubrikerna på sidan och direkt hoppa till den underrubrik som är relevant för henne.
Därför underlättar vi för Anna om vi lägger upp innehållet i grupper med tydliga och konkreta underrubriker. Kom ihåg att rubrikerna ska vara formaterade på rätt sätt, dvs. huvudrubriken ska vara formaterad som rubrik 1 (h1) och underrubrikerna som rubrik 2 (h2), rubrik 3 (h3) osv.
Här är ett exempel på hur en sådan gruppering kan se ut:
Rubriknivå h1: Ledighet
Text som beskriver olika typer av ledigheter, med ord som vi vet att folk söker på.
Rubriknivå h2: Föräldraledighet
Text om föräldraledighet.
Rubriknivå h2: Annan anställning
Text om ledighet för annan anställning.
Rubriknivå h2: Studier
Text om ledighet för studier.
Rubriknivå h2: Närståendevård, flytt och andra privata angelägenheter
Text om ledighet för närståendevård, flytt och andra privata angelägenheter.
Rubriknivå h2: Fackligt engagemang
Text om ledighet för fackligt engagemang.
Så ser de olika rubriknivåerna ut på skärmen.
Länkar
Formulera länktexter med omsorg. En länktext ska vara tydlig och begriplig även utan den omgivande texten. En användare ska utifrån länktexten kunna förstå vad länken leder till.
Detta är särskilt viktigt för personer som använder skärmläsare. Ibland kan de navigera på en sida genom att låta skärmläsaren läsa upp länkarna. Om det bara står "klicka här" i länktexten är det omöjligt att förstå vad länken leder till.
Så formulerar du bra och tillgängliga länktexter
Länktexten är den text som är synlig på webbsidan och är markerad som länk.
- Användare vet när det går att klicka på länkar. Du behöver inte tala om det.
- Skriv hellre ”Information om seminariet” än ”För information om seminariet, klicka här”.
- Det är onödigt att inleda länkar med t.ex. ”Läs mer om …” och ”Gå till …”
- Om länken går till en annan webbplats ska det framgå ur länktexten. Du bör skriva ut organisationens eller webbplatsens namn i slutet av länktexten, till exempel: ”Regler för kontroll av livsmedel hos Livsmedelsverket.”
- Om en länk leder till ett dokument ska det framgå i länktexten. T.ex. ”Uppsala universitets inspel till regeringens forskningspolitik från och med 2021 (pdf)”
- Länktexter som är formulerade likadant ska leda till samma destination.
- Och omvänt: Två länktexter som är formulerade på olika sätt får inte leda till samma destination.
- Du behöver inte fylla i fältet "länkbeskrivning" när du skapar länken. Endast länktexten är relevant.
Så skriver du tillgängliga alt-texter
Beskriv alla bilder med alt-texter (som i Sitevision heter bildbeskrivningar). De bilder som inte behöver ha alt-texter är bilder som ligger i bakgrunden, i sidhuvudet och i sidfoten. Dessa kallas dekorativa. Alla andra bilder, dvs. alla bilder som du som redaktör lägger upp, ska ha alt-text.
- En alt-text ska så kortfattat som möjligt beskriva vad bilden föreställer.
- I fall där det är viktigt för sammanhanget ska även känslan i bilden framgå. Om du till exempel har valt att bildsätta en sida som handlar om hur roligt det är att läsa vid Uppsala universitet med en bild på leende studenter ska det framgå i alt-texten att studenterna ler.
- Om du beskriver känslan i bilden ska du undvika subjektiva beskrivningar. Skriv t.ex. ”studenter promenerar i universitetsparken en solig dag” i stället för att skriva att vädret är vackert. "Solig" är beskrivande, "vackert" är subjektivt.
- Om bilden är en illustration ska det framgå i alt-texten.
- Om du bildsätter till exempel en nyhet med en porträttbild på en person som du har intervjuat ska det stå: "Porträtt på Förnamn Efternamn". Du behöver inte beskriva några andra detaljer i bilden.
- När du skriver alt-texter till diagram ska insikten framgå. Du behöver inte beskriva alla detaljer.
- Tänk på att syftet med alt-texter alltid är att underlätta för användaren. Hur låter det när alternativtexten blir upppläst? Användarens behov och innehållets syfte avgör vilka detaljer du ska beskriva i texten.
- Om du väljer att lägga till bildtext som syns på sidan ska den skilja sig från alt-texten. Alt-texten ska beskriva bilden medan bildtexten ska innehålla kompletterande information.
Exempel:
Denna bild var publicerad på förstasidan på uu.se. Bilden innehåller många detaljer som inte alla kan beskrivas i alt-texten. Därför behövde redaktören formulera en alt-text som var tillräckligt beskrivande men inte för detaljerad. Alt-texten blev så här: "Illustration med olika motiv som för tankarna till vetenskap, så som VR-glasögon och lagerblad."
Denna bild var publicerad på en sida som handlar om universitetets historia. Redaktören valde att bildsätta texten om kända alumner med två bilder som visar hur Celsiushuset har förändrats med tiden. Bildtexten kompletterar det övriga innehållet med extra information: "Uppsalaalumnen Anders Celsius, som är mest känd för den hundragradiga temperaturskalan, grundade också Uppsalas första observatorium. Den nedre delen är bevarad och ligger på Svartbäcksgatan". Alt-texten beskriver det som i det här sammanhanget är relevant: "Ritning av Celsiushuset från 1700-talet bredvid foto på Celsiushuset idag."
Löpande text
Utgå alltid ifrån användaren när du skriver texter för webben. Undvik fluffiga utbroderade omskrivningar. Texten på en webbsida ska vara lätt att ta till sig. Syftet med din text är att så snabbt som möjligt besvara användarens frågor. Ha alltid användaren i fokus när du skriver.
Observera att nyhetstexter har ett annat syfte. Se riktlinjer för nyhetstexter nedan.
Några snabba skrivtips
- Använd ord som besökarna söker på.
- Skriv korta meningar (14-20 ord).
- Skriv korta stycken.
- En tanke per stycke.
Underlätta för användaren när du skriver
Skriv vårdat, enkelt och begripligt.
- Följ den officiella språkvårdens rekommendationer.
- Undvik invecklade meningar, ålderdomliga uttryck, förkortningar och facktermer.
- Tänk på läsaren när du skriver och strukturerar din text.
Tilltalet ska vara direkt. Undvik passiv form. Ett exempel på passiv form är ”passiv form bör undvikas”.
När du använder abstrakta begrepp underlättar du för läsaren om du förtydligar med exempel.
Undvik krångliga och ålderdomliga ord
Läs om krångligt språk i stilguiden
Förkortningar
Läs om förkortningar i stilguiden
Formatering
- Undvik kursiv stil då den kan vara svår att läsa för personer med synnedsättningar.
- Använd gärna fetstil om du vill förstärka vissa nyckelord. Detta kan ge läsaren en överblick. Men gör det med måtta. Överanvändning av formateringar kan resultera i att texten blir svårläst.
- Undvik understruken text då den kan förväxlas med länkar.
- Använd enter för att göra radbrytningar. Skift-enter får du endast använda i de fall där en sådan radbrytning är en del av innehållet, t.ex. i adresser.
Kontakt
- Läs gärna våra guider och riktlinjer eller besök våra webbstugor i första hand.
- Guider
- Webbstugor
- Kontakta it-supporten eller webbredaktionen via Supportportalen