Information, struktur och relationer som presenteras visuellt (exempelvis med formgivning) ska antingen vara maskinläsbara eller finnas beskrivna i text.
I formatmallen
För redaktörer innebär detta: använd rätt block för rätt sak!
Exempel:
Har du skrivit en rubrik? Formatera som rubrik!
Har du en tabell? Formatera som tabell!
Rubriker och rubrikhierarki
Rubrikers syfte är att presentera och dela upp längre texter för att göra det enklare att uppfatta innehållet. Därför måste även texten struktureras i koden. Du gör det genom att sätta en rubriknivå på din rubrik.
Rubriker väljer du i formatmallen där Stycke är förmarkerat.
Rubrik 1 – sidans huvudrubrik
Det måste alltid finnas en H1:a (rubrik 1) på sidan. är den viktigaste rubriken och förekommer en gång på sidan. I WordPress är det alltid sidans namn.. Den sammanfattar och beskriver innehållet i den text som följer.
Underrubriker
Underrubriker finns i flera nivåer, 1, 2, 3 och så vidare. Underrubrikerna ska vara relevanta för det övergripande ämnet. Underrubriker skapar struktur och överblick samt förbättrar läsbarheten och skapar andrum i texten.
Rubrik 2 är den första rubriken som förekommer på sidan för innehåll. Det måste vara logisk ordning på rubrikerna. Rubrik 3 får till exempel inte komma före Rubrik 2.
Exempel på rubrikhierarki:
H1 (rubrik 1): Frukter jag tycker om
Jag tycker om många olika frukter. På denna sida ska jag berätta om mina favoritfrukter utefter kategori.
H2 (rubrik 2): Exotiska frukter
Exotiska frukter kallar jag frukter som måste importeras till Sverige.
H3 (rubrik 3): Ananas
Jag älskar ananaspaj! Men gillar också att äta ananas som det är.
H3 (rubrik 3): Melon
Det finns många olika meloner som jag tycker om.
H4 (rubrik 4): Vattenmelon
En sallad med vattenmelon och fetaost är det bästa som finns på sommaren.
H4 (rubrik 4): Honungsmelon
Jag brukar alltid ha med mig honungsmelon när jag åker och badar på sommaren.
H2 (rubrik 2): Svenska frukter
Det finns många goda svenska frukter. Men den enda jag tycker om är äpple. Därför är det inte relevant för denna sida att lista alla svenska frukter som finns, eftersom syftet med sidan är att berätta om de frukter jag tycker om.
H3 (rubrik 3): Äpple
Jag älskar alla svenska äpplen. Men min favoritsort är Royal Gala.
Tydliga länkar underlättar för alla, men är särskilt viktigt för personer som använder vissa hjälpmedel.
Länkarna behöver vara så tydliga att det går att förstå vart den leder utan
att behöva klicka på den.
Undvik länktexter som exempelvis ”Läs mer”, ”Klicka här”, ”Gå till”.
Exempel på hur du länk till extern webbplats
Mer information om hur du ansluter din organisation hittar du på swedenconnect.se.
Internlänkar
Så långt det går ska du använda internlänkar hellre än externa länkar. Varför då? Jo, internlänkar uppdateras automatiskt på en sida, vilket minskar risken för brutna länkar på en webbplats.
Alltså – i de fall du får en rullista att välja sida från, eller att söka upp en sida i WordPress, välj det. Försök att undvika att lägga in länkar till sidor på din webbplats genom att kopiera och klistra in hela url:en (webbadressen).
Du får rullistor att välja intern sida från vissa moduler som till exempel modulen Lista, där du kan välja mellan Extern länk och Intern länk. Även modulen Inlägg har valmöjlighet mellan Intern och Extern länk. För modulen Inlägg väljer du Underordnade inlägg vid fliken Datakälla.
Exempel på länk till intern webbsida – om du måste skriva den
Om du ändå måste skriva en länk till en intern webbsida direkt på en sida kan skriva så här. Använd länkverktyget och klistra in din url (webbadress).
När du klickar på en mailto:-länk, öppnas ett epostmeddelande i din enhet där mejladressen redan är ifylld i mottagarraden.
Markera mejladressen och klicka på länkverktyget. Skriv in:
mailto:kommun@sater.se
Exempel: Du kan även kontakta oss med dina frågor via e-post till bygg@sater.se.
Telefonlänkar, tel:
När du klickar på en tel:-länk, kan du välja att kopiera telefonnumret eller att ringa det direkt från webbplatsen.
Markera telefonnumret och klicka på länkverktyget. Skriv in:
tel:+4622555000 Kom ihåg att skriva +46 istället för 0.
Exempel: Vi erbjuder även gruppträning genom vattengympa. Ring Skönvikshallen för mer information på telefon 0225-55 311.
För sater.se skriver vi alla verksamhetsnummer enligt: 0225-55 xxx, där 55 står för sig, och de tre sista siffrorna för sig. Det är enklare för läsaren att läsa numret när det finns mellanrum och bindestreck som delar upp numret.
Länkar kan skapas på flera olika sätt och har olika syften.
Tänk på! Du kan inte ha två länkar samtidigt på samma element. Exempelvis, om du har en länk till en annan sida i modulen Manuell inmatning, kan du inte heller lägga in en länk i länktexten.
Exempelvis, kan du inte både ha kvar länken till e-tjänsten och telefonnumret i samma länk. Där måste du ta bort länken till telefonnumret.
Alternativtext (alt-text) är en bildbeskrivning som gör bilder mer tillgängliga för både människor och sökmotorer.
Se till att det finns textbeskrivningar till allt informationsbärande icke-textbaserat innehåll.
Icke-textbaserat innehåll är till exempel:
Foton
Bilder
Diagram
Animationer
Ikoner
Så skriver du en alt-text
Använd vanlig meningsuppbyggnad
En alternativtext skrivs som en helt vanlig mening. Beskriv bara vad bilden faktiskt visar. Undvik att skriva för mycket text, håll det enkelt. Börja med stor bokstav och avsluta med punkt.
Skriv inte ”en bild…”
Du ska inte skriva ”En bild på en gullig hund som rastas av sin matte.” eller ”Ett foto av kommunstyrelsens ordförande som hälsar alla välkomna.”.
Detta är eftersom ett uppläsningsverktyg informerar användaren innan alt-texten att det är en bild. Gå rakt på sak istället: ”En gullig hund rastas av sin matte.” eller ”Kommunstyrelsens ordförande hälsar alla välkomna.”
Fem olika tillfällen, fem olika alternativtexter
1. Formulera textalternativ utifrån bildens budskap och sammanhang
Tanken med textalternativ är att de ska kunna ersätta och beskriva bilden för den som inte ser bilden.
Exempel: Varning!
En röd triangel används som varningsikon för viktig varningsinformation.
Då behöver budskapet som ikonen förmedlar beskrivas, det vill säga ”Varning!” Ikonens utseende är i detta fall inte relevant, till exempel ”röd triangel.”
2. Beskriva ett motiv
Textalternativet kan behöva bestå av en kort beskrivning av motivet. Beskriv innehållet tillräckligt detaljerat för den som enbart uppfattar textbeskrivningen.
3. Beskriva en känsla
Ibland är det viktigt att textalternativet beskriver känslan i en bild, och inte en saklig beskrivning av motivet, för att användaren ska få en förståelse för innehållet.
Utgå från användarens behov och innehållets syfte.
Kom ihåg! Något som skulle kunna vara en dekorationsbild, kan i vissa kontexter vara informationsbärande, beroende på om känslan är viktig för att förstå innehållet på sidan.
4. Beskriva diagram eller annan komplex bild
En komplex bild som exempelvis ett diagram kan innehålla en stor mängd information. Om ett diagram visar smittspridningen över tid räcker det inte med att textalternativet till bilden är ”Diagram över smittspridningen.” Textalternativet ger då inte någon information om själva smittspridningen.
Ett bättre textalternativ är att beskriva det diagrammet förmedlar, till exempel: ”Antal fall var 200 i början av maj, och efter v. 25 låg snittet på under 40 fall.”
Om diagrammet innehåller för mycket information för att beskrivas i textalternativet, kan informationen istället presenteras i tabellform och textalternativet till diagrammet kan då vara ”Diagram över smittspridningen, se tabell.”
5. Dölja dekorativt innehåll
Bilder och illustrationer som inte tillför någon information och som egentligen är till för att ”vila ögonen” på kallas för dekorativa bilder.
Dessa ska döljas för hjälpmedel. Personer som exempelvis använder uppläsande hjälpmedel slipper på så vis lyssna till beskrivningar av bilder som inte tillför innehållet något.
Kom ihåg! Något som skulle kunna vara en dekorationsbild, kan i vissa kontexter vara informationsbärande, beroende på om bilden är viktig för att förstå innehållet på sidan.
Om du lägger ut information i exempelvis pdf- eller wordformat blir den betydligt svårare att söka och komma åt för användare som till exempel använder en mobiltelefon eller saknar den programvara som behövs. Överväg därför noggrant valet av format när du ska publicera något på webbplatsen:
Om du ändå måste publicera pdf:er eller andra dokument måste dessa vara tillgängliga, enligt Lagen om tillgänglighet till digital offentlig service (DOS-lagen). Läs mer om DOS-lagen på Sveriges riksdags webbplats.
Publicera i första hand dokument i standardformatet html, det vill säga en webbsida, av texten.
Utforma dokument så att de enkelt kan läsas på skärm.
Dokument som är skapta för tryck ska arbetas om för att passa webben, inte laddas upp i det tryckvänliga formatet.
