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 allt 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 och temporär.
För att lättare förstå webbtillgänglighet kan vi dra en parallell till den fysiska världen.
Folk i rullstol kan inte ta sig upp för en trappa på ett smidigt sätt. Istället behöver vi bygga en hiss eller en ramp. När vi hjälper rullstolsburna personer att lösa problemet så blir de nöjda och glada. På köpet blir även andra grupper glada, exempelvis folk med barnvagn och rullatorer.
På samma sätt funkar det när du tillgänglighetsanpassar din webbplats. Genom att optimera 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
- hanterbar
- begriplig
- robust.
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. 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.
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 at sökmotorer ska ranka en viss sida så högt upp som möjligt när användare söker på releventa 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.se som drivs av DIGG (Myndigheten för digital förvaltning).
Skapa en checklista
Standarden innehåller 100+ kriterier – men det betyder inte det 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.
Börja implementera förbättringar
Utifrån checklistan från förra steget 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änlighet 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 alal krav med länkar till både WCAG och webbriktlinjer.se där du kan hitta mer info.
Tillsammans skapar vi en webb som är tillgänglig för alla ❤️.
Resursbank
Här är en sammanställning av allt jag har refererar till i inläget samt länkar till andra, nyttiga resurser:
Lagar och konventioner:
- Lagen om vissa produkters och tjänsters tillgänglighet.
- Lagen om tillgänglighet till digital offentlig service.
- Konventionen om rättigheter för personer med funktionsnedsättning.
- WHO om funktionsnedsättning globalt.
Standarder och riktlinjer:
- WCAG 2.2 (den internationella standarden).
- EN 301 549 (den europeiska standarden).
- Introduktion till EU:s tillgänglighetsdirektiv.
- Webbriktlinjer – information om tillgänglighetskraven på svenska.
Övrigt nyttig info om webbtillgänglighet:
- The A11y project – många artiklar om tillgänglighet.
- Axe-con – en årlig konferens om digital tillgänglighet som är gratis att delta på. Konferensen hålls digitalt och går att se i efterhand.
- Applied Accessibility: Practical Tips For Building More Accessible Front-Ends – en föreläsning av Sara Soueidan
- Min tabell med alla kriterier.