Varför er webbplats misslyckas med kognitiv tillgänglighet – och hur ni fixar det

Har du någonsin besökt en webbplats och känt att något viktigt saknas, trots att designen är snygg och allt verkar fungera tekniskt? Blir du arg och frustrerad för att du inte hittar? Du är inte ensam. Många webbplatser misslyckas med att vara fullt tillgängliga för alla användare, särskilt de med kognitiva funktionsnedsättningar. I detta inlägg kommer jag, Pontus Vinderos, att utforska varför teknisk tillgänglighet inte är tillräckligt och varför kognitiv tillgänglighet är avgörande för att skapa en webbplats som verkligen fungerar för alla. Jag kommer att ge dig insikterna och verktygen du behöver för att säkerställa att din webbplats inte bara följer WCAG, utan även tar hänsyn till de kognitiva utmaningar som många användare står inför. Det gör jag med stöd från unik svensk forskning, genom mitt tidigare samarbete med tillgänglighetsexperter som Stefan Jonasson och min långa erfarenhet som webbstrateg i offentlig sektor. Genom att följa dessa rekommendationer kan ni skapa en mer inkluderande och effektiv webbplats för alla era användare.

Vadå kognitiv tillgänglighet?!

När vi pratar tillgänglighet för webbplatser brukar det ofta vara synonymt med förkortningen WCAG, som står för Web Content Accessibility Guidelines. Dessa riktlinjer tas fram av Web Accessibility Initiative från World Wide Web Consortium och det är numera svensk lag för offentliga webbplatser att följa dessa, enligt lag (2018:1937) om tillgänglighet till digital offentlig service. Gott så. Men problemet tycker jag är att många som klarar automatiska tester av WCAG, känner sig nöjda och utbrister: vår webbplats är tillgänglig! Nja, säger jag. WCAG fokuserar nämligen mestadels på tekniska aspekter av tillgänglighet, alltså sådant som är enkelt att mäta med automatiska verktyg. Det kan handla om att det går att navigera via tangentbord, den grafiska designen inte förutsätter fullt färgseende eller att finns textalternativ för bilder, ljud och video.

Som jag skrev i min introduktion till tillgänglighet finns det en stor grupp användare som har kognitiva funktionsnedsättningar. Alltså nedsättning i förmågan att minnas och att kunna tolka intryck, exempelvis menyer, symboler och text. Det kan exempelvis handla om dyslexi, neuropsykiatriska funktionsnedsättningar (som autism) eller intellektuella funktionsnedsättning (som Downs syndrom). För dessa grupper är det helt andra anpassningar som behöver göras. Och anpassningar är fel ordval för det handlar om att åtgärda brister som någon gjort med webbplatsen design, teknik eller innehåll. En webbplats med hög kognitiv tillgänglighet är nämligen en webbplats som är enkel för alla att använda.

Unik svensk forskning till er hjälp

Jag har haft förmånen att både delta i ett närverk för webbansvariga i kommuner med tillgänglighetspionjären Stefan Jonasson och att ha honom som min personliga mentor. Stefan arbetade tidigare på Funka och har drivit flera forskningsprojekt om kognitiv tillgänglighet. Han ledde även forskningsprojektet Begrisam som 2016 blev ett bolag som idag erbjuder konsulttjänster inom tillgänglighet. Sedan 2019 är Stefan teknologie doktor vid Kungliga Tekniska högskolan i Stockholm. Begripsams största insats tycker jag personligen är deras rekommendationer för kognitiv digital tillgänglighet som finns gratis tillgängliga på webben. Mer specifikt tänkte jag här fördjupa mig i deras rekommendationer för webben.

Begripsams rekommendationer om kognitiv tillgänglighet togs fram i projektet DigiKog där personer med egna erfarenheter av kognitiva svårigheter samarbetat med webbexperter. Rekommendationerna består av elva övergripande rekommendationer. Under den övergripande rekommendationen finns specifika rekommendationer. Dels hänvisningar till ISO-standarden för kognitiv tillgänglighet (ISO 21801), dels Begripsams egna rekommendationer för webbplatser.

Här är de elva huvudrekommendationerna (min sammanfattning) samt exempel på den första av Begripsams rekommendationer under varje huvudrekommendation:

1. Förbättra användarupplevelsen genom ökad motivation och individanpassning.
   Exempel: Ge användarna starkt inflytande i hela designprocessen. Helst från början, långt innan koncept och design är satta och fram till att det finns ett resultat.
2. Främja självständighet och minska frustration.
   Exempel: Säkerställ att så många som möjligt kan använda webbplatsen på egen hand.
3. Skapa en känsla av trygghet och tillit.
   Exempel: Ta reda på om användare kan ha starkt negativa känslor till din verksamhet, din webbplats, eller till den uppgift som behöver genomföras.
4. Sträva efter enkelhet och begriplighet.
   Exempel: Säkerställ att din lösning är logisk och konsekvent sett ur användarens perspektiv.
5. Fokusera på det viktiga och ge återkoppling.
   Exempel: Gör det visuellt tydligt vad som borde vara i användarens fokus.
6. Förbättra begriplighet och kommunikation.
   Exempel: Använd principerna för att skriva klarspråk.
7. Stöd användares planering och tidshantering.
   Exempel: Gör det tydligt vad man kan använda webbplatsen till.
8. Gör det lättare att hitta och förstå storlekar och siffror.
   Exempel: Använd visuella metoder för att förtydliga relativa storlekar eller värden.
9. Skapa flexibla lösningar och lika möjligheter för alla.
   Exempel: Följ relevanta standarder för den tekniska grundkonstruktionen (för webb är WCAG 2.1 en relevant standard).
10. Ge användare möjlighet att anpassa gränssnittet.
    Exempel: Säkerställ att webbplatsen inte blockerar användarens möjligheter att göra inställningar i den egna webbläsaren.
11. Hjälp användare att undvika och rätta till misstag.
    Exempel: Hämta så många uppgifter som möjligt automatiskt.

Jag rekommenderar dig att läsa, och använda dig av, de fullständiga rekommendationerna som du kan hämta här:

Kognitiv tillgänglighet på webben hos Begrisam (pdf)

Lek inte kurragömma!

Och låt mig avsluta min appell för kognitiv tillgänglighet med en av mina käpphästar när det gäller webbdesign och webbutveckling. Det verkar finnas någon fäbless bland designers och beställare av webbplatser att gömma viktiga delar av sitt gränssnitt eller innehåll bakom knappar. Klassikern är så kallade hamburgarmenyer på mobila gränssnitt, vilket av något outgrundlig anledning följer med till datorvarianten av samma sajt (detta borde vara kriminaliserat). Men det gäller också innehåll på webbsidor där vissa lägger viktigt innehåll i så kallad dragspelsblock, alltså fyrkantiga lådor med plustecken som kräver att du som användare först måste förstå vad som finns där under och sedan klicka ut blocket. Ett annat exempel är när länkar till undersidor läggs i huvudmenyn istället för direkt på sidan där användaren befinner sig. Alla dessa designval innebär en onödig kognitiv belastning.

En annan aspekt av detta är skroll. Denna är inte lika tydlig som med att gömma saker under knappar, men kan vara lika skadlig för den kognitiva tillgängligheten. Med skroll menas att användaren måste aktivt skrolla ner sidan efter att den laddas för att upptäcka något viktigt, som exempelvis navigationslänkar. Naturligtvis ska du ha webbsidor där användaren måste skrolla, men det behöver vara tydligt vad som ligger längre ner på sidan. Ofta vill användarna hitta något på webbplatsen och då är länkar i fokus. Därför behöver det direkt finnas länkar till relevanta delar av webbplatsen och en pedagogik i att leda användaren rätt. Detta kallas för informationsdoft.

I Astrid Lindgrens bok om Rönja Rövardotter finns det vildvittror, ett flygande sagoväsen många känner till från sin barndom. När Ronja hoppar i älven för att undvika vildvittrorna kraxar vildvittrorna: ”var är de små människorna, syns inte, finns inte”. Lite så tänker jag att du kan tänka med er webbplats. Om du gömmer något bakom en knapp eller under vecket, då existerar det inte för användare. Detta blir väldigt tydligt om du börjar mäta beteende som klick och skroll på din webbplats med värmekartor, i analysverktyg som Hotjar eller med Matomos tillägg för heatmap.

Snälla, sluta lek kurragömma med era användare. Lägg allting synligt. Om du måste dölja något (särskilt på mobil), gör det på ett begripligt sätt. Dölj exempelvis inte delar av menyn utan dölj hela menyn och gör det väldigt tydligt hur du fäller ut den.