Presentation av data

Data används som alternativ till bilder. Vi behöver skapa tydlig presentation av data som stödjer och vägleder våra användare i sitt mål med användningen (understödjer princip 1) . Det gör vi med lättförstålig och konsekvent visualisering av data.

Gov.UKs guide om datavisualisering

Visualisering av data

Datavärdet ska alltid skrivas ut först, så att det blir rätt när en screen reader ska läsa upp det.

Exempel: (bild) Visuell hierarki

Data i en tabell

Att visa data i en tabell kan underlätta för användaren att snabbt hitta vad den söker.

Text vänsterjusteras. Siffror högerjusteras. Siffror som kompletteras med text ska vänsterjusteras.

Exempel

Titel	Antal	Typ	Dimensioner	Ursprung
Första	5	Öppen	20 x 40 cm	Stockholm
Andra	2	Stängd	24 x 40 cm	Göteborg

Randig

.table-striped

Exempel

Titel	Antal	Typ	Dimensioner	Ursprung
Första	5	Öppen	20 x 40 cm	Stockholm
Andra	2	Stängd	24 x 40 cm	Göteborg

Med ram

.table-bordered

Exempel

Titel	Antal	Typ	Dimensioner	Ursprung
Första	5	Öppen	20 x 40 cm	Stockholm
Andra	2	Stängd	24 x 40 cm	Göteborg

Kompakt tabell

.table-condensed

Exempel

Titel	Antal	Typ	Dimensioner	Ursprung
Första	5	Öppen	20 x 40 cm	Stockholm
Andra	2	Stängd	24 x 40 cm	Göteborg

Med hover-funktion

.table-hover

Exempel

Titel	Antal	Typ	Dimensioner	Ursprung
Första	5	Öppen	20 x 40 cm	Stockholm
Andra	2	Stängd	24 x 40 cm	Göteborg

<table class="table [modifier class]">
  <tr>
    <th>Titel</th>
    <th class="text-right">Antal</th>
    <th>Typ</th>
    <th>Dimensioner</th>
    <th>Ursprung</th>
  </tr>
  <tr>
    <td>Första</td>
    <td class="text-right">5</td>
    <td>Öppen</td>
    <td>20 x 40 cm</td>
    <td>Stockholm</td>
  </tr>
  <tr>
    <td>Andra</td>
    <td class="text-right">2</td>
    <td>Stängd</td>
    <td>24 x 40 cm</td>
    <td>Göteborg</td>
  </tr>
</table>

Ledtexter

Om du behöver förtydliga innehållet med en ledtext bör du tänka på att innehållet ofta är primärt och ledtexten sekundär, så använd en nedtonad färg och alternativt skriv inom parentes. Exempel: August Strindberg (författare)

Kodexempel