Publicerad 28 november 2022

Tabeller och diagram

Tabeller och diagram är ett bra sätt att presentera data om ett ämne. De kan dock sällan leva sitt eget liv utan kräver en tydlig kontext, där texten sätter in data i ett sammanhang och förklarar samband.

Faktabaserade texter mår ofta bra av att den data som ligger bakom presenteras i samband med texten. Det skapar mervärde för läsaren och kan göra resonemang och slutsatser enklare att förstå.

Det finns många sätt att visualisera data på en webbsida. Det vanligaste är att visa data i form av en tabell eller ett diagram. De visas ofta som stillbilder, men ett mer tillgängligt sätt är att göra tabellen direkt på sidan och att generera diagrammet direkt från en datakälla. Det finns stöd för detta på skr.se, i webbrapporter och på andra Sitevision-webbplatser.

Riktlinjer

  • Om en text blir mer begriplig genom att du också presenterar den data som ligger bakom slutsatserna, så bör du göra det. Vanligast är att presentera ett diagram eller en tabell i anslutning till texten.
  • Diagram och tabeller ska alltid presenteras i en kontext. Det vill säga det kan aldrig stå för sig självt, utan är ett komplement till texten på webbsidan.

Tabeller

  • Tabeller får inte användas för design.
  • Tabeller får bara innehålla textdata, inte bilder och andra mediafiler.
  • Tabeller får inte innehålla länkar.
  • Tabeller ska alltid ha en tabellbeskrivning (caption) som förklarar vad tabellen visar.
  • I SiteVision ska tabelltypen Standard alltid användas.
  • Sammanfatta gärna tabellen i löpande text direkt efter tabellen.
  • Tabeller med många kolumner bör delas upp i flera tabeller.
  • Tabeller ska aldrig presenteras som stillbilder om det inte finns tekniska begränsningar för att göra dem som tabell direkt på sidan.
    • Till exempel går inte tabeller som är färgkodade att publicera direkt på sidan, utan måste göras som stillbilder. Observera att innebörden av färgkodningen måste beskrivas i brödtext så att de som inte kan uppfatta färger ändå förstår att tabellens data är uppmärkt på ett särskilt sätt!

Diagram

  • När det är möjligt ska du alltid välja att visa diagram där data hämtas från en datakälla. Det blir både mer tillgängligt och mer intresseväckande.
  • Visa bara diagram som stillbilder när det inte fungerar på annat sätt.
    • Oavsett om diagrammet är en stillbild eller hämtar data från en extern källa ska innehållet beskrivas i brödtext i anslutning till diagrammet.
  • Diagram som är stillbilder måste alltid uppfylla kraven vad gäller tillgänglighet. Det vill säga använda färger som är lätt urskiljbara, kunna presentera data även utan färger, ha etiketter och hjälptexter som är lätt läsbara och så vidare.
  • Diagram som är stillbilder ska alltid ha hög upplösning, så besökaren kan förstora bilden vid behov.
  • Om diagrammet är mycket komplext eller detaljerat (och därmed svårt att förklara i text) kan du även publicera diagrammets data i form av en tabell som komplement.
    • Om diagrammets data är särskilt betydelsefullt kan du ge ytterligare service genom att också publicera tabellen som ett nedladdningsbart Excel-dokument.
    • Att publicera data i tabellform ersätter dock inte kravet att så långt det är möjligt beskriva diagrammet i textform.

Gör så här (kräver minst behörighet Webbredaktör

Tabeller

Du kan skapa en tabell antingen genom att antingen skapa den från början eller kopiera en redan befintlig tabell.

Om du vill börja med en tom tabell bör du placera den i en egen textmodul, inte som en del av en annan textmodul. Detta för att underlätta redigering och felsökning.

Om du i stället vill utgå från en befintlig tabell gör du så här:

  1. Kopiera modulen KOPIERA DENNA tabeller som finns på denna sida.
  2. På sidan där tabellen ska ligga: markera Mittenspalt.
  3. Klistra in modulen.
  4. Placera modulen genom att dra och släppa den där den ska vara på sidan.

Redigera tabeller

Du kan göra följande i en tabell:

  • Lägga till eller ta bort kolumner och rader.
    • Högerklicka i tabellen och välj Rad > Infoga rad före/efter eller Ta bort rad.
    • Högerklicka i tabellen och välj Kolumn > Infoga kolumn före/efter eller Ta bort kolumn.
    • Du kan enkelt lägga till rader genom att ställa dig i den nedre högra cellen och trycka på TAB-tangenten.
  • Skriva en beskrivning av vad tabellen visar i textfältet högst upp (Kostnad för vanliga matvaror 2009–2013, kronor i exemplet).
    • Du kan välja att dölja denna beskrivning för seende besökare genom att markera detta i Tabellegenskaper.
      • Du måste alltid ha en tabellbeskrivning av tillgänglighetsskäl. Ofta är det dock bättre att dölja den för seende och i stället använda en vanlig mellanrubrik ovanför textmodulen som innehåller tabellen.
    • Ändra beskrivningen genom att ställa markören sist i det förifyllda fältet och sedan backa tills alla bokstäver är raderade. Först därefter skriver du din egen beskrivningstext.
      • Ändra inte genom att markera och radera det som är förifyllt, eftersom det kan orsaka problem med formateringen av tabellen.
  • Skriva kolumnrubriker i tabellens översta fält.
  • Skriva in tabellens värden i övriga celler.
    • Flera av cellerna är i exemplet högerjusterade. Om du har behov av att ändra justeringen:
      • ställ musen i den cell som du vill ändra,
      • klicka på kugghjulet i verktygsfältet högst upp,
      • välj Justera och ändra till den justering du önskar.

Illustration, textjustering tabell

Exempel, tabell

Kostnad för vanliga matvaror 2009–2013, kronor

Produkt

2009

2010

2011

2012

2013

Morot

150

200

250

300

350

Äpple

340

360

380

400

420

Päron

80

100

120

140

160

Apelsin

400

450

500

550

600

Diagram

Om diagrammet är en stillbild gör du på samma sätt som med vanliga bilder.

Om diagrammet är interaktivt (användaren kan antingen göra ett eget urval eller data markeras när muspekaren är över det) är tillvägagångssättet olika beroende på vilken källa som används för att presentera diagrammet.

Diagram från CSV-fil

Karta från CSV-fil

Diagram från Kolada

Tekniska lösningar för diagram

Det finns tre olika lösningar för att visa diagram på skr.se:

  1. Diagram som hämtar data (i realtid) från Kolada
  2. Diagram som hämtar data från en (uppladdad) CSV-fil
  3. Diagram som stillbild.

Du ska välja diagram från Kolada när:

  • Du vill visa dagsaktuell data.
  • Data i diagrammet ska uppdateras automatiskt.
  • Besökaren ska kunna välja kommun eller region att se data för.

Du ska välja diagram från CSV-fil när:

  • Du vill visa en ögonblicksbild av data.
  • Du vill visa data som du tagit fram på egen hand.

Du ska välja diagram som stillbild när:

  • Det inte går att presentera diagrammet på något annat sätt.

Läs vidare