Kom igång med webbtillgänglighet – utan att tappa förståndet

Webbtillgänglighet är ett stort ämne som kan kännas överväldigande i början. Här sammanfattar jag det du behöver veta för att komma igång.

Vad är webbtillgänglighet?

Webbtillgänglighet handlar om att skapa användarvänliga och tillgängliga webbplatser för alla – oavsett eventuella funktionsnedsättningar. En funktionsnedsättning kan vara både fysisk och kognitiv, samt permanent eller temporär.

För att lättare förstå webbtillgänglighet kan vi dra en parallell till den fysiska världen.

Elin sitter i rullstol efter att hon förlorat förmågan att gå. Elin kan inte ta sig upp för trappor på ett smidigt sätt eftersom det saknas hissar och ramper där hon lätt kan rulla fram. Kommunen hon bor i bestämmer sig därför att bygga rullstolsanpassade sätt att ta sig upp och ner för alla trappor i hela staden. Elin blir glad känner sig nu mer självständig eftersom hon kan ta sig fram obehindrat på egen hand.

Efter att kommunen byggde rullstolsanpassade trappor har livet även förenklats för Agda 87 som ofta är ute med sin metallic röda rullator, Bettan. Lösningen har även gynnat Petra som nyligen har blivit förälder och behöver kunna ta sig fram med sin barnvagn utan att lyfta den upp och ner för alla trappor.

En enda lösning för en tilltänkt målgrupp gynnade i slutändan tre stycken grupper. På samma sätt funkar det när du tillgänglighetsanpassar din webbplats. Genom att anpassa webbplatsen för en specifik funktionsnedsättning kommer flera grupper gynnas av det och webben blir bättre och mer tillgänglig för alla överlag.

4 grundprinciper

Webbtillgänglighet bygger på fyra principer som beskrivs i den internationella standarden “Web Content Accessibility Guidelines” (WCAG).

De fyra principerna säger att en webbsida ska vara

  • möjlig att uppfatta (perceivable)
  • hanterbar (operable)
  • begriplig (understandable)
  • robust (robust).

På engelska för kortas detta P.O.U.R.

13 riktlinjer

Alla fyra principer består tillsammans av följande 13 riktlinjer:

Textalternativ
Ge textalternativ för allt som inte är text, så att det kan användas i andra former vid behov, till exempel punktskrift, tal, symboler eller enklare språk.
Tidsbaserade medier
Ge alternativ för tidsbaserad media.
Anpassningsbar
Skapa innehåll som kan presenteras på olika sätt utan att tappa information eller struktur.
Urskiljbar
Gör det enklare för användare att se och höra innehållet, inklusive att kunna separera förgrund från bakgrund.
Tangentbordstillgänglig
Gör all funktionalitet tillgänglig från ett tangentbord.
Tillräckligt med tid
Ge användarna tillräckligt med tid att läsa och använda innehållet.
Anfall och fysiska reaktioner
Designa inte innehåll på ett sätt som är känt för att orsaka anfall eller fysiska reaktioner.
Navigerbar
Tillhandahåll sätt att hjälpa användare att navigera, hitta innehåll och avgöra var de är.
Inmatningsmodaliteter
Gör det enklare för användare att använda funktionalitet genom olika ingångar utöver tangentbordet.
Läsbar
Gör textinnehåll läsbart och begripligt.
Förutsägbar
Få webbsidor att visas och fungera på förutsägbara sätt.
Inmatningsstöd
Hjälp användare att undvika och korrigera misstag.
Kompatibel
Maximera kompatibiliteten med nuvarande och framtida användaragenter, inklusive hjälpmedel.

50+ målkriterier

Inom varje riktlinje finns det sedan olika målkriterier. Dessa är mätbara för att du ska kunna testa och se när de har uppnåtts. Målkriterierna delas in i följande tre nivåer:

Nivå A
Dessa är de mest grundläggande åtgärderna du behöver göra för att en webbsida ska vara någorlunda tillgänglig.
Nivå AA
Dessa borde du göra för att inkludera majoriteten av användare.
Nivå AAA
Detta är den högsta nivån som riktar sig mot mer specifika fall. Även om du uppnår den högsta nivån så är det ingen garanti för att din webbsida är 100% tillgänglig för alla målgrupper.

Varför ska jag bry mig om webbtillgänglighet?

Det är lätt att känna ett visst motstånd till att tillgänglighetsanpassa webbsidor. Det tar ju mer tid och kräver mer kompetens. Det finns dock goda anledningar till varför du bör – och måste – bry dig.

Webben är till för alla

WHO (världshälsoorganisationen) konstaterar att 1 av 6 har en funktionsnedsättning globalt. Det innebär, rent statistiskt, att drygt 3 av mina 20 kollegor har en funktionsnedsättning i någon form.

I konventionen om rättigheter för personer med funktionsnedsättning fastställer FN (förenta nationerna) dessutom att det är en mänsklig rättighet att få tillgång till information via webben.

Vi som webbutvecklare har alltså ett ansvar att ha koll på webbtillgänglighet eftersom det i slutändan är vi som kommer att bygga dessa tillgängliga webbplatser.

Om du inte vill bygga tillgängliga webbplatser för andras skull så gör det för din egen skull. Du kommer nämligen också bli gammal en vacker dag med alla nedsättningar som det innebär. Den webb du bygger idag blir den du måste brottas med imorgon 😉.

Det är ett lagkrav

Sedan 2019 finns lagen om tillgänglighet till digital offentlig service (DOS-lagen) som bl.a. säger att offentlig sektor måste tillgänglighetsanpassa sina webbplatser.

DOS-lagen är en svensk lagstiftning och bygger på EU:s tillgänglighetsdirektiv – som officiellt heter Direktiv (EU) 2016/2102.

År 2025 kommer tillgänglighetsdirektivet även att gälla för privat sektor och går då under det officiella namnet Direktiv (EU) 2019/882. Den svenska lagstiftningen för direktivet heter lagen om vissa produkters och tjänsters tillgänglighet och träder kraft 28 juni 2025.

OBS: Lagarna gäller enbart för myndigheter och företag mot konsumenter (privatpersoner). Du som privatperson har med andra ord inget krav på dig att tillgänglighetsanpassa din egna webbplats.

Det kan gynna SEO

SEO (sökmotoroptimering) handlar om att optimera en webbplats i hopp om att sökmotorer ska ranka en viss sida så högt upp som möjligt när användare söker på relevanta termer.

Om en person med skärmläsare inte förstår din webbplats så kommer inte sökmotorer göra det heller.

Om du vill öka dina chanser att ranka högre upp i resultaten så måste du göra din webbplats förstådd – och det gör du genom att tillgänglighetsanpassa den, främst med hjälp av semantisk HTML.

Hur kommer jag igång med webbtillgänglighet?

Webbtillgänglighet är ett stort ämne och kan kännas överväldigande – inte minst när du börjar djupdyka i WCAG.

Jag började med att massexponera mig för ämnet för att få koll på grunderna. Jag minns bl.a. en föreläsning av Sara Soueidan om tillämpad tillgänglighet där hon på ett bra sätt illustrerade hur det är för en blind person att navigera en icke-tillgänglig webbplats.

Jag skrev även upp alla frågor jag hade. Allteftersom kunde jag börja koppla ihop lösa trådar till en mer sammanhängande helhet. Inlägget du läser just nu är resultatet av min inledande frågeställning; “Vad är webbtillgänglighet och hur kommer jag igång?”.

Nedan har jag sammanställt en kort kom-igång-guide i tre steg. Den baserar sig på alla omvägar jag tog innan jag landade i vad jag faktiskt behövde göra. Jag vill gärna dela den med dig för att du ska slippa ta samma omväg som jag och riskera att tappa förståndet på vägen.

Utgå ifrån standarden

För kunna tolka vad lagen säger om tillgänglighet, finns den så kallade tillgänglighetsstandarden (EN 301 549). Det är en europeisk standard som bygger på den internationella standarden WCAG 2.1 – fast med fler krav än de som finns med i WCAG.

Tillgänglighetsstandarden gäller för DOS-lagen (offentlig sektor) och just nu finns det ingen motsvarande standard för den nya lagen (privat sektor). Den motsvarande standarden förväntas komma efter att lagen har trätt kraft och kommer då troligtvis innehålla krav från WCAG 2.2. Tills dess kan vi utgå ifrån EN 301 549.

I dokumentet för den europeiska standarden finns olika bilagor. I bilaga A finns en tabell som heter A.1. Den tabellen innehåller allt du behöver se över om du har en webbplats. Varje rad i tabellen refererar sedan till tillhörande paragraf i dokumentet där det står mer utförligt vad som ska göras.

Både WCAG och den europeiska standarden är på engelska. Om du föredrar att läsa kraven på svenska så går de att hitta på webbriktlinjer som drivs av DIGG (Myndigheten för digital förvaltning).

Skapa en checklista

Standarden innehåller 100+ kriterier – men det betyder inte att allting är relevant för just ditt projekt. Genom att spalta upp alla krav i en lista blir det lättare att filtrera bort sånt som är irrelevant.

Jag sammanställde därför kraven från tabell A.1 i den europeiska standarden, i en ny tabell. Alla krav länkade jag även till respektive WCAG-kriterium och/eller relevant sida på webbriktlinjer.se för att snabbare hitta mer information om vad som behöver göras.

Om du har nytta av samma översikt, så kan du ladda ner tabellen med alla kriterier som jag skapade.

OBS: Arbetet med webbtillgänglighet är inte så enkelt som att bara bocka av saker från en lista och sen vara klar. Arbetet är hela tiden pågående och behöver anpassas för alla specifika situationer. Checklistan bör därför ses ett sätt att hålla koll på vad du behöver se över på webbplatsen med referenser till var du kan hitta mer info.

Få en bild av nuläget

Med verktyg som Pa11y kan du få en hint om hur tillgänglig din webbplats är just nu. Det blev väldigt konkret vad jag behövde göra när jag körde deras command-line interface på min egna webbplats. Var dock medveten om att det inte är någon garanti att din webbplats är tillgänglig bara för att du inte får några felmeddelanden från Pa11y.

Kolla färgkontraster med APCA och jämför gentemot ditt typsnitt (storlek och tjocklek).

Byt miljö. Ta med din telefonen ut i solen och kolla hur din webbplats fungerar i det sammanhanget. Jag upptäckte att min webbplats var ca skitdålig på vissa ställen när det kom till kontraster. Typsnittet var alldeles för tunt och mörkt.

Du kan även fråga andra hur de upplever din webbplats. Det är lätt att bli hemmablind.

Börja implementera förbättringar

Utifrån checklistan jag nämnde tidigare och resultatet från nuläget kan du börja med det som känns lättast och uppfylla nivå A. Till din hjälp har du WCAG-standarden (eller webbriktlinjer.se) för att förstå mer konkret vad du behöver göra.

När du tittar på WCAG-standarden för första gången så kan det kännas överväldigande – jag kände direkt att jag ville fly när jag såg dokumentet.

Kom dock ihåg att den finns av en anledning, så börja alltid med att läsa den. Därefter kan du komplettera med information från andra ställen om du behöver ett förtydligande.

Sammanfattning

Det finns 4 övergripande principer inom webbtillgänglighet som säger att en webbplats ska vara

  • möjlig att uppfatta
  • hanterbar
  • begriplig
  • robust.

Det finns två standarder som beskriver mer konkret vad som behöver göras för att en webbplats ska vara tillgänglig:

  • Den internationella standarden (WCAG).
  • Den europeiska standarden (EN 301 549).

Du ska bry dig om webbtillgänglighet för att

  • det är en mänsklig rättighet att få tillgång till information via internet
  • det är ett lagkrav
  • det gynnar din SEO.

Allt du behöver se över om du har en webbplats finns listat i den europeiska standarden i tabell A.1, som finns i bilaga A. Du kan även ladda ner excel-filen jag skapade med en sammanställning av alla krav med länkar till både WCAG och webbriktlinjer.se där du kan hitta mer info.

Resursbank

Här är en sammanställning av allt jag har refererar till i inlägget samt länkar till andra, nyttiga resurser.

Lagar och konventioner:

Standarder och riktlinjer:

Övrigt nyttig info om webbtillgänglighet:

Tillsammans skapar vi en webb som är tillgänglig för alla ❤️.

  • Publicerad:
  • Uppdaterad: