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.
Innehåll på sidan
- Använd tillräckliga kontraster
- Använd mönster när kontraster inte räcker till
- Låt användaren påverka presentationen
- Försök göra så att texten kan förstoras
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å?
Försök att så långt som möjligt kombinera ytor, text, symboler och linjer som inte flyter ihop med varandra när användaren betraktar dem i gråskala.
Enligt WCAG ska kontrasten mellan två grafiska element som användaren behöver kunna urskilja alltid vara minst 1:3, och för liten text 1:4,5. Kontrastvärdet är förhållandet mellan ljusstyrka i förgrundsfärg och bakgrundsfärg.
För textinnehåll finns ett ganska enkelt, men kanske inte alltid så snyggt sätt att säkerställa tillräckliga kontraster, nämligen att använda en mycket ljus färg på texten och lägga till en mörk rand eller skugga runt bokstäverna (en så kallad "halo"). Alternativet mörk text med ljus halo går förstås lika bra och kan ibland passa bättre.
Det finns många verktyg som kan beräkna kontrastvärdet mellan två färger. Personligen gillar jag applikationen Colour Contrast Analyser som har två ”pipetter” (markerade som 1 och 2 i skärmbilden nedan) som kan användas för att ta färgprover på två pixlar. Då räknar verktyget automatiskt ut ett kontrastvärde (3). Det spelar ingen roll vilken av färgerna du mäter först, så 1:3 är lika bra som 3:1.
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:
- Öppna reglagen för färgnyans.
- Kryssa för ”Synchronize colour values”.
- Dra i färgspaken för röd, grön eller blå tills
- kontrastvärdet är okej.
- Då kan du kopiera färgkoden.
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.
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!
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.
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.
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.)
Tillbaka till Metamatrix guide Så gör du digitala kartor tillgängliga.
