Kartor: Visuell tillgänglighet

En utmaning för den som vill göra kartor tillgängliga är att de i grunden är grafiska, och därmed svåra att helt och hållet återge för den som inte ser. För den gruppen är det väldigt viktigt att det finns alternativ till den grafiska presentationen. Men de flesta, även bland personer med synnedsättning, kan trots allt se någonting. Så den visuella tillgängligheten har stor betydelse!

Detta är en fördjupningssida till Metamatrix guide Så gör du digitala kartor tillgängliga. Planen är att successivt uppdatera innehållet, så hör gärna av dig med förslag och frågor!

De flesta av de generella riktlinjerna för visuell tillgänglighet (från exempelvis WCAG) gäller även för kartor. Men det kan ibland vara extra svårt för just kartor. Här är några tips.

Använd tillräckliga kontraster

Ingen kan urskilja ett grafiskt motiv om det inte har tillräcklig kontrast mot bakgrunden. Exakt hur stor kontrast som behövs varierar från person till person, och även belysning och andra faktorer påverkar.

Ett mycket enkelt sätt att undersöka om en karta har någorlunda bra kontraster är att betrakta kartbilden i gråskala. (Många bildprogram och ibland även webbläsare har en funktion för att visa innehåll i gråskala.) Kan du urskilja kartans olika delar då?

En ljusgrön och en orange färgton jämförs och kontrastvärdet beräknas till 1.2:1.
Skärmbild av verktyget Colour contrast analyser.

Dessutom kan du få hjälp att välja en färgnyans som ger tillräcklig kontrast utan att ändra kulören. Det går till så här:

  1. Öppna reglagen för färgnyans.
  2. Kryssa för ”Synchronize colour values”.
  3. Dra i färgspaken för röd, grön eller blå tills
  4. kontrastvärdet är okej.
  5. Då kan du kopiera färgkoden.
Funktionen för val av godkänd färgnyans beskrivs i brödtexten.
Verktyg kan hjälpa dig att hitta en passande färgnyans.
Om du inte kan välja nyanser som kontrasterar mot varandra så försök åtminstone att märka ut gränser om det är viktigt att olika ytor ska kunna urskiljas.

Samma kartbilder som tidigare. Lika dåliga kontraster, men nu finns åtminstone urskiljbara kantlinjer.

Använd mönster när kontraster inte räcker till

När du arbetat en stund med kontraster för att särskilja grafiska element (ytor, linjer, texter osv) kanske du märker att det inte går att ha särskilt många olika nyanser om alla ska ha godkänd kontrast mot alla andra. Faktum är att utrymmet mellan vit och svart bara rymmer drygt tre olika ljusstyrkor med tillräckligt stor skillnad sinsemellan!

En vit ruta, en grå, en mörkgrå och en svart. Mellan de tre första är kontrastvärdet precis 1:3, mellan den mörkgrå och den svarta är kontrastvärdet bara 1:2,3.
En vit ruta, en grå, en mörkgrå och en svart. Mellan de tre första är kontrastvärdet precis 1:3, mellan den mörkgrå och den svarta är kontrastvärdet bara 1:2,3. Gråskalan rymmer bara två hela godkända kontrast-steg (1:3). För ett tredje sådant steg skulle vi behöva en färg som var mörkare än svart (#000000).

Gråskalan rymmer bara två hela godkända kontrast-steg (1:3). För ett tredje sådant steg skulle vi behöva en färg som var mörkare än svart (#000000).

Självklart vill vi använda färger också. Det blir oftast vackrare, gladare och tydligare, och därmed även mer tillgängligt. Det finns färgpaletter som är särskilt utformade för att minska risken för att personer med färgblindhet ska ha svårt att se skillnad på kulörerna. Se till exempel verktyget ColorBrewer som erbjuder hjälp med att välja sådana färgskalor. Det kan ge utrymme för lite större variation. Men om kartan ska kunna skrivas ut i gråskala eller kunna läsas av någon som av andra skäl inte ser färger alls utan enbart skillnad i ljusintensitet så räcker helt enkelt inte enfärgade varianter särskilt långt.

Därför behöver vi ofta komplettera kontrastskillnader med mönster av olika slag. Både linjer och ytor kan ha mönster.

Mönstrade linjer

Linjer kan exempelvis utföras som

  • Heldragen tunn linje
  • Heldragen tjock linje
  • Streckad - korta streck
  • Prickad - små prickar
  • Prickad - stora prickar
  • Och så vidare, det går ju att använda prickar och streck i olika kombinationer till exempel

Även dubbeldragna, vågiga och taggiga linjer är möjliga, om det inte gör något att linjens precision minskar en aning. Och ibland går det att återanvända mönster om de kombineras med olika typer av symboler som upprepas med jämna mellanrum längs linjen eller där linjen byter riktning eller slutar.

Mönstrade ytor

Kartor används ofta för att knyta egenskaper eller värden till olika områden. Allra mest klassiskt är väl typ av landskap, men även folkmängd, virusnivåer, resultat i politiska val och liknande.

Samma kartor som tidigare, men nu särskiljs element inte bara med färg utan även med mönstring.
Med mönstring kan elementen bli möjliga att urskilja trots små kontrastskillnader sinsemellan.
I två dimensioner är det möjligt att skapa väldigt många olika mönster. Förutom generella geometriska mönster såsom enfärgat, randigt, prickigt och rutigt i olika proportioner går det ju att använda mer originella motiv som upprepas i mönster. Prova dig fram!

Tänk på att vissa mönster kan ge upphov till moaré-effekter när de visas på en digital skärm. Det kan upplevas obehagligt och försämra sidans tillgänglighet och användbarhet. Ibland skapar de till och med rörelser på skärmen, som kan vara extremt besvärliga. Om du är känslig för rörelser så följ inte den här länken, för den går till en avbildning av en sådan effekt.

Det kan också vara så att vissa färger och vissa mönster har ett större uppmärksamhetsvärde än andra. Det gäller att vara medveten om så att dessa bara används för ytor som verkligen ska framhävas.

Låt användaren påverka presentationen

Ibland kan olika användare ha olika behov. Det kan exempelvis handla om att färgerna grön och röd skulle ge ett pedagogiskt mervärde (grön=det går bra här, röd=stopp) för vissa användare, men inte för personer med färgblindhet. Eller att vissa vill ha detaljer och andra en avskalad karta (se avsnittet om att visa lagom mycket information i fördjupningen om kognitiv tillgänglighet).

Det kan även vara samma användare som har olika behov vid olika tillfällen. Vid ett tillfälle behöver kartan bara framhäva vägar, och då kanske det räcker att det går att särskilja vatten från land. Vid ett annat tillfälle behöver markegenskaper framhävas och då krävs kanske mönstringar trots att de gör kartbilden mer informationstät.

Överväg att lägga in reglage som låter användaren påverka presentationen!

Storlek på text är ett annat område där individuella behov varierar.

Försök göra så att texten kan förstoras

Många kartor kan användaren zooma i. Anpassning av textstorlek i kartor baserat på zoom-läge är en kartografisk utmaning som kan få responsiv webbdesign att verka väldigt simpel.

För texter som följer geografiska former (vägar, vattendrag…), eller om det är trångt och risk för krockar, är det till exempel ofta bra att låta textstorlek följa kartans zoom-läge. Men i andra fall är det bäst om textstorlek regleras utan koppling till kart-utsnittets storlek. Risken är ju annars stor att texter hamnar utanför skärmen vid inzoomning, eller att en bokstav blir så stor att den täcker hela skärmen.

Det långt ifrån alla webbkomponenter för kartvisning som ger varken webbutvecklare eller slutanvändare möjlighet att kontrollera textstorlek. Men däremot har webbutvecklare stora möjligheter att påverka texter som finns i anslutning till kartan. Definitivt finns den möjligheten för HTML-innehåll i kartans närhet, och förhoppningsvis även för texter i eventuella reglage till kartan.

Enligt WCAG-kriteriet 1.4.4 ska text kunna förstoras till dubbel storlek (200 procent) utan att information eller funktionalitet försvinner. DIGG har tolkat detta som att grundkravet är att det alltid ska gå att zooma webbsidor och appar (det går i nästan alla webbläsare idag).

Men det finns betydande fördelar om det dessutom går att förstora enbart texten på sidan. Följande illustration visar först en skärm med en karta och några nyckeltal intill. Därefter samma skärm med fördubblad textstorlek (men ingen förstoring av kartan) och slutligen samma skärm med 200 procent zoomläge.

Bilden beskrivs i följande text

Den som ser märker att rubriktexten blir lika stor vid textförstoring som vid zoom, så för textens läsbarhet spelar det ingen roll på vilket sätt användaren kan förstora. Men däremot blir överblicken betydligt bättre när enbart text förstoras. Varken högerspaltens nyckeltal eller Sverigekartans nedre halva får plats på skärmen vid 200 procent zoom. Det blir därmed betydligt mer scrollning vid proportionell zoom. För den som enbart zoomar får vi hoppas att sidans responsivitet är välgjord (vilket krävs enligt ett annat WCAG-kriterium). Annars blir det inte bara scrollning i höjdled utan även i sidled, vilket ofta är väldigt besvärligt.

Faktum är att det inte bara är WCAG 1.4.4 som kräver att det ska gå att förstora text, utan även kriteriet 11.7 i standarden EN301549 – och även detta kriterium behöver uppfyllas enligt DOS-lagens ”presumtion om överensstämmelse”. (Det där sista är ett konstig formulering som betyder att den som uppfyller de krav som räknas upp i en viss tabell i EN-standarden anses uppfylla DOS-lagens krav på att digital service ska vara möjlig att uppfatta, hanterbar, begriplig och robust.)

En karta eller kartfunktion brukar kunna benämnas utifrån vilket område den täcker, vilken funktion den har, eller vilka informationslager den erbjuder. Till exempel

  • ”Kollektivtrafik i Hälsingland”
  • ”Nederbörd i Sverige 2008”
  • ”Orienteringstavla m/s Baltic”
  • ”Vägbeskrivning till Metamatrix kontor”.

På en webbsida passar det ofta att lägga beskrivningen som en h-rubrik ovanför kartan, eller som en figcaption om kartan ligger i ett figure-element. Om själva kartan ligger i en ram (iframes används ofta för att infoga interaktiva kartkomponenter såsom Google maps) så bör iframe-elementet ha ett title-attribut som beskriver innehållet. Det underlättar för den som använder skärmläsare att avgöra om det är meningsfullt att ”dyka ner” i rutan och undersöka dess innehåll, eller om det är bättre att hoppa förbi den.

Tillbaka till Metamatrix guide

Hand som håller i en telefon med en kartbild utomhus i trafik

Så gör du digitala kartor tillgängliga

En orientering om hur du kan presentera geografisk information och kartor på webben utan att exkludera människor med funktionsnedsättning och bryta mot lagar om tillgänglighet.

Publicerad: