Datavisualisering: Lage tilgjengelige diagrammer og grafer for et globalt publikum

Datavisualisering er et kraftig verktøy for å kommunisere informasjon, men effektiviteten avhenger av tilgjengeligheten. Hvis diagrammer og grafer ikke er designet med tanke på tilgjengelighet, kan en betydelig del av det globale publikummet – inkludert personer med funksjonshemninger, språkbarrierer eller varierende nivåer av teknisk ekspertise – bli ekskludert. Denne artikkelen gir en omfattende veiledning for å lage tilgjengelige datavisualiseringer som er inkluderende og forståelige for alle.

Forstå viktigheten av tilgjengelig datavisualisering

Tilgjengelighet i datavisualisering handler om mer enn bare å overholde juridiske krav som WCAG (Web Content Accessibility Guidelines) eller Section 508. Det handler om å skape en bedre brukeropplevelse for alle. Tilgjengelige diagrammer og grafer er:

• Brukbare for personer med funksjonshemninger: Skjermleserbrukere, personer med nedsatt syn eller fargeblindhet, og personer med motoriske vansker er avhengige av tilgjengelig design for å forstå data.
• Lettere å forstå for alle: Tydelige etiketter, tilstrekkelig kontrast og godt organiserte data forbedrer forståelsen for alle brukere.
• Mer effektive for tverrkulturell kommunikasjon: Å unngå kulturbestemte symboler og bruke et klart og konsist språk gjør visualiseringer mer forståelige på tvers av forskjellige kulturer.
• Bedre for mobilbrukere: Prinsipper for tilgjengelig design oversettes ofte til bedre mobilopplevelser, og sikrer at visualiseringer er synlige og brukelige på mindre skjermer.
• Bra for SEO (søkemotoroptimalisering): Å gi alternativ tekst for bilder og strukturere innhold logisk forbedrer søkemotorrangeringer, og øker synlighet og rekkevidde.

Viktige prinsipper for tilgjengelig datavisualisering

Å lage tilgjengelige diagrammer og grafer krever nøye vurdering av flere viktige prinsipper:

1. Alternativ tekst (Alt Text)

Alternativ tekst er en kortfattet beskrivelse av diagrammet eller grafen som leses opp av skjermlesere. Det lar brukere med synshemninger forstå informasjonen som presenteres. Når du skriver alt-tekst, bør du vurdere følgende:

• Vær beskrivende: Oppsummer hovedbudskapet fra diagrammet eller grafen. Hvilken historie forteller dataene?
• Vær konsis: Hold beskrivelsen kort og presis, ideelt sett under 150 tegn.
• Inkluder kontekst: Gi kontekst om dataene som visualiseres, for eksempel kilde og tidsperiode.
• Vurder kompleksiteten til visualiseringen: For komplekse diagrammer kan det være nødvendig å gi en lengre, mer detaljert beskrivelse eller en lenke til en datatabell.

Eksempel:

Ikke-tilgjengelig: <img src="sales.png" alt="Chart">

Tilgjengelig: <img src="sales.png" alt="Linjediagram som viser en økning på 15 % i globalt salg i Q4 2023 sammenlignet med Q3 2023.">

2. Farge og kontrast

Farge bør ikke være den eneste måten å formidle informasjon på. Personer med fargeblindhet eller nedsatt syn kan kanskje ikke skille mellom visse farger. Sørg for tilstrekkelig fargekontrast mellom dataelementene og bakgrunnen.

• Bruk en fargekontrastsjekker: Verktøy som WebAIMs Color Contrast Checker (https://webaim.org/resources/contrastchecker/) kan hjelpe deg med å avgjøre om fargekombinasjonene dine oppfyller WCAG-kravene.
• Unngå å stole utelukkende på farge: Bruk mønstre, etiketter og teksturer i tillegg til farge for å differensiere dataelementer.
• Vurder fargeblindhet: Bruk fargepaletter som er tilgjengelige for personer med forskjellige typer fargeblindhet. Mange verktøy er tilgjengelige for å simulere hvordan visualiseringen din vil se ut for personer med forskjellige fargesynmangler.
• Gi alternative visuelle signaler: Bruk kanter, former og størrelser for å skille mellom datapunkter.

Eksempel: I stedet for å bare bruke forskjellige farger for å representere produktkategorier i et stolpediagram, bruk forskjellige mønstre (f.eks. solid, stripet, prikket) og etiketter på hver stolpe.

3. Etiketter og tekst

Tydelige og konsise etiketter er avgjørende for å forstå datavisualiseringer. Sørg for at alle akser, datapunkter og forklaringer er riktig merket. Bruk en skriftstørrelse som er stor nok til å leses lett.

• Bruk et klart og konsist språk: Unngå sjargong og tekniske termer som kanskje ikke forstås av alle brukere.
• Gi tilstrekkelig skriftstørrelse: Bruk en skriftstørrelse på minst 12 punkter for brødtekst og 14 punkter for overskrifter.
• Sørg for tilstrekkelig avstand: Unngå å overfylle etiketter og datapunkter.
• Bruk beskrivende titler: Gi en tittel som nøyaktig beskriver innholdet i diagrammet eller grafen.

Eksempel: I stedet for å bruke forkortede etiketter som "Q1" for første kvartal, bruk hele termen "Kvartal 1."

4. Datastruktur og organisering

Måten data er strukturert og organisert på, kan ha stor innvirkning på tilgjengeligheten. Ordne data logisk og bruk passende diagramtyper for å representere informasjonen effektivt.

• Bruk passende diagramtyper: Velg diagramtypen som best representerer dataene og meldingen du vil formidle. Bruk for eksempel stolpediagrammer for å sammenligne kategoriske data, linjediagrammer for å vise trender over tid, og sektordiagrammer for å vise proporsjoner.
• Sorter data logisk: Sorter data i en meningsfull rekkefølge, for eksempel stigende eller synkende rekkefølge, eller etter kategori.
• Grupper relaterte data: Grupper relaterte datapunkter sammen for å gjøre det lettere å forstå forholdet mellom dem.
• Unngå rot: Fjern unødvendige elementer som kan distrahere fra dataene, for eksempel rutenettlinjer eller overdreven dekorasjon.

Eksempel: I stedet for å bruke et komplekst 3D-diagram for å representere enkle data, bruk et 2D-stolpediagram eller linjediagram.

5. Interaktivitet og tastaturnavigasjon

Hvis datavisualiseringen din inneholder interaktive elementer, for eksempel verktøytips eller drill-down-funksjoner, må du sørge for at de er tilgjengelige for tastaturbrukere og skjermleserbrukere.

• Gi tastaturnavigasjon: Sørg for at alle interaktive elementer kan nås og aktiveres ved hjelp av tastaturet.
• Bruk ARIA-attributter: Bruk ARIA-attributter (Accessible Rich Internet Applications) for å gi tilleggsinformasjon til skjermlesere om formålet og tilstanden til interaktive elementer.
• Gi tydelige fokusindikatorer: Gjør det tydelig hvilket element som har fokus når du navigerer med tastaturet.
• Sørg for at verktøytips er tilgjengelige: Gi alternativ tekst for verktøytips eller gjør informasjonen tilgjengelig i et separat, tilgjengelig format.

Eksempel: Hvis et diagram har verktøytips som viser detaljert informasjon når du holder musepekeren over et datapunkt, må du sørge for at den samme informasjonen er tilgjengelig når datapunktet er fokusert ved hjelp av tastaturet.

6. Tabeller som alternativer

For brukere som er avhengige av skjermlesere eller foretrekker å analysere data i et tabellformat, anbefales det på det sterkeste å gi en datatabell som et alternativ. Dette lar dem få tilgang til rådataene og utforske dem på sin egen måte.

• Gi en lenke til datatabellen: Inkluder en lenke til en datatabell under diagrammet eller grafen.
• Bruk semantisk HTML: Bruk semantiske HTML-elementer som <table>, <thead>, <tbody>, <th> og <td> for å strukturere tabellen.
• Gi kolonneoverskrifter: Bruk kolonneoverskrifter for å tydelig identifisere dataene i hver kolonne.
• Bruk bildetekster: Gi en bildetekst for tabellen som beskriver innholdet.

Eksempel:

<table>
  <caption>Globalt salg etter region - Q4 2023</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Salg (USD)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Nord-Amerika</td>
      <td>1,200,000</td>
    </tr>
    <tr>
      <td>Europa</td>
      <td>900,000</td>
    </tr>
    <tr>
      <td>Asia Pacific</td>
      <td>750,000</td>
    </tr>
  </tbody>
</table>

Verktøy og teknologier for tilgjengelig datavisualisering

Flere verktøy og teknologier kan hjelpe deg med å lage tilgjengelige datavisualiseringer:

• Tilgjengelighetssjekkere: Verktøy som WAVE (Web Accessibility Evaluation Tool) kan hjelpe deg med å identifisere tilgjengelighetsproblemer i visualiseringene dine.
• Fargekontrastsjekkere: Verktøy som WebAIMs Color Contrast Checker kan hjelpe deg med å sikre tilstrekkelig fargekontrast.
• Skjermlesere: Å teste visualiseringene dine med skjermlesere som NVDA eller JAWS er avgjørende for å sikre tilgjengelighet.
• Datavisualiseringsbiblioteker: Noen datavisualiseringsbiblioteker, som D3.js og Chart.js, tilbyr innebygde tilgjengelighetsfunksjoner. Utforsk dokumentasjonen deres for tilgjengelighetsalternativer.
• Dedikerte tilgjengelighetsplugins: Utforsk bruk av plugins eller utvidelser skreddersydd for tilgjengelighet for datavisualisering i spesifikke rammeverk (f.eks. React, Angular, Vue.js).

Eksempler på tilgjengelige datavisualiseringer

Eksempel 1: Tilgjengelig stolpediagram (global befolkning etter kontinent)

Beskrivelse: Et stolpediagram som viser den globale befolkningen etter kontinent i 2023. Diagrammet bruker høykontrastfarger, tydelige etiketter og alternativ tekst.

Tilgjengelighetsfunksjoner:

• Alt Text: "Stolpediagram som viser den globale befolkningen etter kontinent i 2023. Asia har den største befolkningen med 4,7 milliarder, etterfulgt av Afrika med 1,4 milliarder, Europa med 750 millioner, Nord-Amerika med 600 millioner, Sør-Amerika med 440 millioner og Oseania med 45 millioner."
• Fargekontrast: Høykontrastfarger brukes for å sikre at stolpene lett kan skilles fra bakgrunnen.
• Etiketter: Hver stolpe er merket med kontinentnavnet og befolkningstallet.
• Datatabell: En lenke til en datatabell er gitt under diagrammet.

Eksempel 2: Tilgjengelig linjediagram (globale temperaturtrender)

Beskrivelse: Et linjediagram som viser globale gjennomsnittlige temperaturtrender fra 1880 til 2023. Diagrammet bruker forskjellige linjestiler for å skille mellom forskjellige regioner, tydelige etiketter og alternativ tekst.

Tilgjengelighetsfunksjoner:

• Alt Text: "Linjediagram som viser globale gjennomsnittlige temperaturtrender fra 1880 til 2023. Diagrammet viser en jevn økning i globale temperaturer det siste århundret, med en spesielt skarp økning de siste tiårene."
• Linjestiler: Forskjellige linjestiler (f.eks. solid, stiplet, prikket) brukes for å skille mellom forskjellige regioner.
• Etiketter: Aksene er merket med år og temperatur.
• Datatabell: En lenke til en datatabell er gitt under diagrammet.

Beste praksis for å lage tilgjengelige datavisualiseringer for et globalt publikum

I tillegg til de viktigste prinsippene og eksemplene som er skissert ovenfor, bør du vurdere følgende beste praksis når du lager tilgjengelige datavisualiseringer for et globalt publikum:

• Forstå publikummet ditt: Vurder den mangfoldige bakgrunnen, evnene og tekniske ekspertisen til målgruppen din.
• Bruk inkluderende språk: Unngå sjargong, slang og kulturbestemte referanser som kanskje ikke forstås av alle brukere.
• Gi kontekst: Gi tilstrekkelig kontekst om dataene som visualiseres, inkludert kilde, tidsperiode og metodikk.
• Test visualiseringene dine med brukere: Utfør brukertesting med personer med funksjonshemninger og brukere fra forskjellige kulturelle bakgrunner for å sikre at visualiseringene dine er tilgjengelige og forståelige.
• Dokumenter tilgjengelighetsarbeidet ditt: Dokumenter trinnene du har tatt for å gjøre visualiseringene dine tilgjengelige, inkludert verktøyene og teknikkene du har brukt.
• Hold deg oppdatert: Tilgjengelighetsstandarder og beste praksis er i stadig utvikling. Hold deg oppdatert på de nyeste retningslinjene og anbefalingene.
• Vurder oversettelse: Hvis du planlegger å distribuere visualiseringene dine til et globalt publikum med forskjellige morsmål, planlegg for oversettelse av etiketter, titler og alt-tekst.
• Adresse kulturelle følsomheter: Vær oppmerksom på kulturelle normer og følsomheter når du velger farger, symboler og visuelle metaforer. Det som kan være akseptabelt i en kultur, kan være støtende i en annen.
• Tidssoner og datoformater: Når du visualiserer data relatert til tid, må du sørge for å tydelig spesifisere tidssonen. Når du arbeider med datoer, tilbyr du fleksibilitet i datoformater (YYYY-MM-DD, MM/DD/YYYY, etc.) for å imøtekomme forskjellige regionale preferanser.
• Valutaberegninger: Hvis dataene dine involverer finansielle tall, spesifiser valutaen. Der det er mulig, tilbyr du konverteringsalternativer for å tillate brukere å se dataene i sin lokale valuta.

Konklusjon

Å lage tilgjengelige diagrammer og grafer er avgjørende for å sikre at data er forståelige og brukelige for alle. Ved å følge prinsippene og beste praksis som er skissert i denne artikkelen, kan du lage datavisualiseringer som er inkluderende, effektive og tilgjengelige for et globalt publikum. Husk at tilgjengelighet ikke bare er et samsvarsproblem; det er en mulighet til å forbedre brukeropplevelsen for alle.