Så gör du ett diagram tillgängligt – steg för steg

1. Använd färger med tillräcklig kontrast

För att personer med nedsatt syn eller färgseende ska kunna uppfatta innehållet i ett diagram, måste färgerna ha tillräcklig kontrast – både mot bakgrunden och mot varandra.

Så gör du:

• Använd färgkombinationer med hög kontrast, till exempel mörka färger mot ljus bakgrund eller ljusa färger med mörka linjer.
• Kontrollera kontrasten med verktyg som WebAIM Contrast Checker eller motsvarande funktion i din designprogramvara.
• Tänk på att text kräver ännu högre kontrast för att vara läsbar.

WCAG-krav:

• Grafiska element som förmedlar information ska ha minst 3:1 i kontrastförhållande mot intilliggande färger (WCAG 2.1, kriterium 1.4.11).
• Text ska ha minst 4,5:1 i kontrast mot bakgrund (gäller för vanlig text upp till 18 pt, eller 14 pt fetstil) (WCAG 2.1, kriterium 1.4.3).

Använd färger som klarar kontrastkrav (etu.se – ev byta rubriktext?

2. Använd inte enbart färg för att förmedla information

Färg i sig räcker inte. För personer med färgblindhet eller kognitiva utmaningar måste informationen kunna uppfattas även utan färg.

Så gör du:

• Använd mönster, symboler eller etiketter i staplar och cirkeldiagram.
• Variera linjetyper (hel, prickad, streckad) i linjediagram.
• Beskriv färgerna i text, till exempel ”Den blå stapeln visar…” i direkt anslutning till diagrammet.

WCAG-krav:

Information får inte enbart förmedlas med färg (WCAG 2.1, kriterium 1.4.1).

3. Lägg gärna till en textversion av informationen

Enligt DOS-lagen kan ett diagram undantas från vissa krav, som kontrast, om informationen också finns tillgänglig i en alternativ form – exempelvis som tabell. Vi rekommenderar dock att alltid använda tillräcklig kontrast och komplettera med text eller tabell.

Fördelar:

• Gör innehållet tillgängligt för skärmläsare.
• Möjliggör kopiering av data.
• Ger ett alternativ för användare som har svårt att tolka visuella objekt.

Exempel:

Placera en tabell direkt under diagrammet eller länka till en separat sida med all data.

4. Ge rubriker och axlar tydliga namn

Rubriker och axlar ska vara tydliga så att användaren förstår vad som mäts – utan att behöva gissa.

Exempel:

• Skriv ”Antal besök per månad” i stället för bara ”Besök”.
• Lägg till enheter: ”Tid (minuter)”, ”Besök (antal)”.

5. Skriv en tydlig och informativ alt-text

En alt-text (alternativtext) ska kortfattat förklara vad diagrammet visar. Den behövs för att användare som använder skärmläsare ska kunna förstå innehållet.

Tips för en informativ alt-text:

• Beskriv syftet med diagrammet – vad vill du visa?
• Nämn eventuella trender, jämförelser eller avvikelser.
• Håll texten kort (2–3 meningar), men informativ.

Exempel på tydlig alt-text:

”Stapeldiagram som visar antal supportärenden per månad. Antalet ökade från januari till mars, med en topp i februari.”

Vill du ge mer detaljerad information, komplettera alt-texten med en textversion.

6. Testa med användare – eller hjälpmedel

Ett enkelt sätt att kontrollera om diagrammet fungerar är att:

• Be en kollega läsa det högt utan att visa bilden.
• Testa med en skärmläsare, till exempel NVDA (Windows) eller VoiceOver (Mac).

Gå igenom checklistan innan du publicerar ditt diagram:

• Använder du färger med tillräcklig kontrast enligt WCAG (minst 3:1 för grafik)?
• Har du säkerställt att färg inte är enda sättet att förstå innehållet?
• Finns det en textversion eller tabell som komplement till diagrammet?
• Är rubriker och axlar tydliga och informativa – med enheter och syfte?
• Har du skrivit en alt-text som beskriver vad diagrammet visar?
• Har du testat att diagrammet fungerar med skärmläsare eller utan att se bilden?