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!

Ett område där det inte borde vara något problem att göra kartsystem tillgängliga är när det gäller deras reglage, alltså zoomfunktioner, panorering, sökfunktioner, lagerhantering, inställningar med mera. I princip bör alla de vanliga kriterierna från WCAG och EN301549 kunna tillämpas på sådant.

Då de flesta som lägger in kartsystem på webbplatser inte själva utvecklar kartkomponenter utan köper eller kopierar från någon annan så handlar dessa kriterium oftast om att ställa rätt krav. Välj inte en kartkomponent som inte har tillgängliga reglage!

Det innebär bland annat följande:

Innehåll på sidan

Erbjud komplement till gester

Inte alla kan svepa (svajpa) fingret över en skärm för att flytta på kartan, eller nypa ihop fingrarna för att kunna zooma ut. Det är faktiskt inte ens alla som har fingrar!

Därför är det nödvändigt att funktioner som går att kontrollera med gester även går att hantera på andra sätt. Se till att det finns knappkommandon som alternativ! Knappar på skärmen kan hanteras både med skärmläsare, röststyrning och andra hjälpmedel om de konstrueras på rätt sätt.

I praktiken brukar detta innebära att det ska finnas knappar för att reglera zoom-nivå och panorera. Ibland krävs även knappar för mer komplexa funktioner, och det kan underlätta med knappar som exempelvis förflyttar användaren tillbaka till ursprungspositionen.

Se till att det går att hantera kartan med tangentbordet

Det finns flera WCAG-kriterier som ska säkerställa att användare som är beroende av tangentbord eller liknande inmatningsdon kan använda digitala verktyg. I princip borde dessa automatiskt uppfyllas av föregående punkt, alltså att det finns möjlighet att styra kartan med knappreglage och inte bara rörelser. Men det händer ändå att det blir problem i praktiken. Till exempel om fokusordningen inte är tillräckligt genomtänkt, så att det krävs extremt många tab-tryckningar för att komma till en knapp. Testa!

Beskriv alla reglage med text

Förutom att användaren måste kunna nå och aktivera reglage på olika sätt behöver de veta vad reglagen har för funktion. Visuellt sitter det ofta bara en symbol på eller intill ett reglage. Det kan fungera för den som ser om symbolen är väldigt välkänd. Till exempel brukar ett plustecken på en knapp i en karta betyda ”zooma in”. Men så fort symbolen är mer okänd kan den behöva kompletteras med en synlig text. Finns det inte plats för en sådan? Gör en tydlig hjälpfunktion som användaren enkelt kan plocka fram.

Två knappar märkta med plus- och minustecken, och ett skjutreglage mellan dem.

Och självklart måste alla knappar och andra reglage ha en begriplig text som kan läsas upp för den som använder skärmläsare. Det är en enkel sak, men här brister det tyvärr ändå ganska ofta. Till exempel är det vanligt att kartkomponenter har engelskspråkiga dolda texter, och när kartan finns på en svenskspråkig sida kanske de engelska orden läses upp enligt svenska språkregler. Eller så saknas text helt, kanske för att utvecklarna utgått från att ingen med synnedsättning använder kartor överhuvudtaget.

Gör det tydligt för alla vilken inställning ett reglage har

Ett ganska vanligt problem med skjutreglage är att det inte framgår för den som använder skärmläsare vilken inställning de för närvarande står på. Den som inte ser reglaget kanske får veta att reglaget låter användaren välja årtal, men sedan framgår inte vilket årtal som är valt. Ibland är det även svårt att avgöra om en kryssruta är markerad eller ej. Särskilt gäller det när ”kryssrutan” är utformad som ett spak som kan ha två lägen. Ofta går det att ta reda på aktuell inställning genom att prova att ändra, men det borde egentligen inte behövas – ibland är det direkt olämpligt att prova.

Texten Visa matbutiker? följt av en kryssruta som ser ut som en avokado

För skjutreglage (sliders) finns det aria-attribut som bör uppdateras när användaren ändrar inställning, så att en skärmläsare kan läsa upp aktuell inställning. Bland annat aria-valuenow. För äkta kryssrutor (input type=”checkbox”) är det enkelt för den som använder skärmläsare att höra inställningen – men den som själv utformar en liknande kontroll med hjälp av css och javascript måste se till att uppdatera exempelvis aria-checked eller aria-pressed. Och om den visuella formgivningen är tvetydig gäller det att komplettera med tydlig text.

Gör klickytor tillräckligt stora och placera dem inte för tätt

Människor har olika finmotorisk precision. En del är stadiga på hand och kan enkelt klicka på mycket små knappar eller andra kontroller. Andra är darriga. Kanske av medicinska skäl, eller för att de sitter i ett fordon som rör sig. Därför är det viktigt att det vi ska kunna klicka på är tillräckligt stort, och inte placerat för nära något annat klickbart. Hittills har detta inte varit ett krav på WCAG nivå AA, men om nuvarande utkast till WCAG version 2.2 blir standard så kommer det att finnas mätbara krav. En inte alltför vågad gissning är att det kommer att ske inom det närmaste året, och att det något år senare kan komma att påverka gällande lagkrav. Och användarnas behov har funnits där hela tiden, så vi rekommenderar alla att ta hänsyn till behoven redan nu.

Dokumentera tillgänglighets­funktioner tydligt

Det är utmärkt om det till exempel går att använda tangentbordskommandon för att styra er karta, eller att få en muntlig presentation som alternativ till att själv tolka kartan. Men om användarna inte vet hur det går till så är nyttan begränsad. Om ni erbjuder bra funktioner för ökad tillgänglighet, se till att användarna hittar dem och kan använda dem.

Lås inte in användaren i kartan!

Det har redan framgått att användaren helst ska kunna förstora en webbsida eller webbsidans textinnehåll utan att behöva scrolla i sidled. Men faktum är att även scrollning i höjdled kan bli besvärligt när en karta upptar hela skärmen.

Schematisk ritning av en webbsida som innehåller en karta. En mobilskärm visar bara en del av kartan.

På en mobil med pekskärm kan det ibland leda till att alla gester tolkas av kartsystemet och när användaren försöker scrolla uppåt eller neråt på sidan panoreras bara kartan så att ett annat geografiskt område visas! Vi har sett webbsidor som på det sättet fångar användaren i kartan. Enda sättet en användare då kan komma ut ur kartan är att starta om webbläsaren (såvida de inte exempelvis vet hur man startar en skärmläsare och söker efter nästa h-rubrik).

Tillbaka till Metamatrix guide Så gör du digitala kartor tillgängliga.