Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Styleguide

Tilgængelig grafik

Grafik kommunikerer data visuelt frem for udelukkende med tekst og tal. Det er derfor særligt vigtigt at arbejde med tilgængelighed her, f.eks. for at tilgodese farveblinde brugere.

Reducér kompleksiteten

Reducer mængden af unødvendige oplysninger, så de vigtige ting er klare.

Målet er at nå ud til alle målgrupper ved at kommunikere med det klareste sprog og de enkleste teknikker. Fjern det unødvendige visuelle rod for at skabe en klar og enkel oplevelse. Og husk, nogle mennesker ser tingene fysisk anderledes eller slet ikke.

Brug farve med omhu

Datavisualiseringer og infografik bør kunne aflæses i sort/hvid for sikre at brugere med synshandicap som fx farveblindhed, også kan aflæse det.

Eksempel på graf med forskellige figurer frem for farver

Grafen gør brug af både farver og figurer for at differentiere mellem værdierne, således at brugere med synshandicap som farveblindhed også kan læse grafen.

Segment 1 vises med en stiplet linje med en rombe for hvert punkt. Segment 2 vises med en solid linje sammen med en stjerne for hvert punkt.

Sådan (do)

Eksempel på korrekt visning af søjlediagram med farver og mønstre

Sådan: Betydning bør ikke kommunikeres af farve alene. Brug også mønstre, teksturer, figurer, linjetyper og andet for fx at adskille de forskellige udsnit (søjler, linjer, dele, mv.).

Ikke sådan (don't)

Eksempel på ukorrekt visning af søjlediagram med manglende farver og mønstre

Ikke sådan: Undgå farvekombinationerne grøn-rød, grøn-blå, grøn-brun, grøn-sort, grøn-grå, blå-grå, lys grøn-gul og blå-lilla.

Vær opmærksomhed på at farver der grænser op til hinanden skal overholde WCAG 2.1 ift farvekontrast.

Tjek gerne datavisualiseringer og infografikker med et simulationsværktøj (læs mere om evalueringsværktøjer) for at se, hvordan de forskellige farver syner overfor hinanden med et synshandikap som farveblindhed.

Sørg for alternativer til grafikken

Sæt infografik og datavisualiseringer i en kontekst, hvor sidens titel og evt. en introduktionstekst hjælper brugeren med at forstå indholdet.

Giv gerne de enkelte udsnit (søjler, linjer, dele mv.) en etikette (beskrivende tekst) for at brugeren lettere kan afkode betydningen.

Sørg for at etiketterne (de beskrivende tekster) til de forskellige elementer/segmenter er nemme af forstå og adskiller sig fra hinanden.

Eksempel på graf der viser fordelingen af cykelture og cykelkm efter turens længde.

Figuren viser fordelingen af cykelture og cykelkm efter turens længde. Det ses, at lige over halvdelen af alle cykelture er under 2km, men at disse ture kun udgør 23% af cykeltrafikarbejdet.

Kilde: DTU

Sæt etiketten (beskrivende tekst) i en boks med hvid baggrund og sort kant på, hvis der er problemer med farvekontrast mellem tekstfarven på etiketten og den baggrund de skal være på.

Husk en sigende/forklarende alt-attribut på grafikken eller elementerne i datavisualiseringen så skærmlæseren kan læse op.

Giv brugeren en oversigt over data fra diagrammet eller en tekstbeskrivelse af diagrammet. Beskrivelsen kan evt fungere som opsummering og kan hjælpe brugeren med at drage en konklusion.

Referencer