Webbtillgänglighet: varför det är viktigt och hur du förbättrar din webbplats

När människor inte kan använda webbplatsen försvinner de tyst

De flesta verksamheter får inte ett utförligt klagomål varje gång någon stöter på en digital barriär. En besökare som inte kan öppna menyn med tangentbordet, förstå ett felmeddelande eller läsa text med svag kontrast går ofta bara vidare.

Tillgänglighetsproblem kan därför visa sig som:

• avbrutna formulär
• färre bokningar eller köp
• fler frågor till kundtjänsten
• användare som inte hittar viktig information
• personal som måste erbjuda manuella omvägar
• svagare förtroende för verksamheten

Webbtillgänglighet handlar alltså inte bara om ideal eller checklistor. Det handlar om huruvida människor faktiskt kan uppfatta innehållet, navigera, förstå gränssnittet och slutföra uppgiften som förde dem till webbplatsen.

Min praktiska bedömning är enkel: Tillgänglighet är användbar design tagen på allvar. Många förbättringar som hjälper personer med funktionsnedsättning gör samtidigt webbplatsen bättre för äldre, mobilanvändare, personer med tillfälliga skador och alla som använder den under mindre gynnsamma förhållanden.

WCAG är den praktiska referenspunkten

Web Content Accessibility Guidelines (WCAG) utvecklas av W3C genom Web Accessibility Initiative. Riktlinjerna beskriver hur webbinnehåll kan göras mer tillgängligt för personer med bland annat syn-, hörsel-, motoriska och kognitiva funktionsnedsättningar.

WCAG bygger på fyra principer. Innehåll och funktioner ska vara:

• möjliga att uppfatta
• hanterbara
• begripliga
• robusta

I praktiken omfattar det bland annat:

• textalternativ för bilder som förmedlar information
• tangentbordsåtkomst till menyer, knappar och formulär
• tillräcklig färgkontrast
• synliga fokusmarkeringar
• korrekt rubrikstruktur och semantisk HTML
• etiketter och felmeddelanden som förklarar vad användaren ska göra
• innehåll som fortfarande fungerar vid zoom och större text
• stöd för hjälpmedel som skärmläsare

WCAG har tre nivåer: A, AA och AAA. A täcker de mest grundläggande barriärerna, medan AA innehåller fler krav som är viktiga för praktisk användning. AAA är den högsta nivån, men är varken ett realistiskt eller nödvändigt mål för alla typer av innehåll.

För de flesta professionella webbplatser är AA ett rimligt kvalitetsmål. Det exakta lagkravet måste däremot bedömas utifrån land, verksamhet och vilken typ av tjänst webbplatsen erbjuder.

WCAG 2.2 är den senaste färdiga versionen, men lagar kan hänvisa till äldre krav

WCAG 2.2 är W3C:s senaste färdiga rekommendation. Den bygger vidare på WCAG 2.1 och innehåller bland annat ytterligare kriterier för synligt tangentbordsfokus, storleken på klickbara mål och tillgänglig autentisering.

W3C rekommenderar att den senaste versionen används. Innehåll som uppfyller WCAG 2.2 uppfyller även WCAG 2.1 och 2.0, med de preciseringar som följer av standarden.

Det betyder inte att varje lag automatiskt kräver full WCAG 2.2 AA. Svenska och europeiska regelverk kan hänvisa till WCAG 2.1 och den europeiska standarden EN 301 549.

Det är därför klokt att skilja mellan:

1. vad lagen kräver för just er tjänst
2. vilket kvalitetsmål ni vill använda vid nyutveckling
3. vilka barriärer som faktiskt hindrar användarna i dag

En tillgänglighetsgranskning bör tydliggöra alla tre, inte bara leverera en generell poäng.

Vad gäller för webbplatser i Sverige?

Vilka svenska krav som gäller beror bland annat på vem som driver tjänsten och vad den används till.

Lagen om tillgänglighet till digital offentlig service, DOS-lagen, gäller offentliga aktörers webbplatser och mobila applikationer samt vissa privata aktörer med offentlig finansiering. Kraven konkretiseras genom EN 301 549, som i stor utsträckning hänvisar till WCAG 2.1 nivå A och AA men även innehåller krav utöver WCAG.

Offentliga aktörer behöver dessutom bland annat publicera en tillgänglighetsredogörelse och erbjuda en möjlighet att rapportera brister.

Sedan den 28 juni 2025 gäller också lagen om vissa produkters och tjänsters tillgänglighet. Den omfattar bestämda konsumentinriktade produkter och tjänster, bland annat:

• e-handel
• bank- och betaltjänster
• elektronisk kommunikation
• vissa persontransporttjänster
• e-böcker
• vissa audiovisuella medietjänster

Det innebär inte att varje liten företagswebbplats omfattas på samma sätt. Verksamhetens storlek, tjänstens karaktär och eventuella undantag behöver bedömas i det enskilda fallet.

En teknisk granskning kan identifiera barriärer och avvikelser, men ersätter inte juridisk rådgivning. Vid osäkerhet om den egna verksamhetens skyldigheter bör information från Digg, PTS eller kvalificerad juridisk rådgivning användas.

Poängen är inte att skrämma någon till handling. Poängen är att tillgänglighetskrav redan ingår i lagstiftning, upphandling och kvalitetsarbete. Det är vanligtvis billigare att bygga bra mönster från början än att reparera ett helt designsystem i efterhand.

Affärsvärdet är praktiskt

Tillgänglighetsarbete garanterar inte en viss procentuell konverteringsökning. Värdet ligger i att onödiga hinder tas bort från uppgifter som webbplatsen redan ska stödja.

Formulär, bokning och köp

Ett formulär utan tydliga etiketter, begripliga felmeddelanden eller logisk fokusordning är ett konverteringsproblem innan det blir en juridisk fråga.

Ett tillgängligt formulär bör bland annat:

• ha en synlig etikett som är tekniskt kopplad till varje fält
• förklara vilket format som förväntas
• identifiera fel tydligt
• hantera fokus på ett förutsägbart sätt
• bekräfta när formuläret har skickats
• kunna användas utan mus

Det hjälper skärmläsaranvändare, men även alla som fyller i formuläret på mobilen eller råkar skriva fel.

Mobilanvändning

Många tillgänglighetsåtgärder förbättrar mobilupplevelsen direkt:

• större tryckytor
• bättre kontrast i starkt ljus
• tydliga fokus- och aktiva lägen
• innehåll som tål förstoring
• mindre krav på precision
• mer begripliga felmeddelanden

En användare behöver inte ha en permanent funktionsnedsättning för att dra nytta av detta. Personen kanske håller telefonen med en hand, befinner sig på tåget eller har en tillfällig syn- eller rörelsenedsättning.

Struktur och sökbarhet

Semantiska rubriker, beskrivande länkar, textalternativ och välstrukturerat innehåll hjälper söksystem att förstå sidan. Det är ingen garanti för bättre ranking, men det skapar en bättre teknisk och redaktionell grund.

Tillgänglighet och SEO överlappar inom vissa områden, men är inte samma sak. En sida kan vara väl optimerad för sök och ändå vara omöjlig att använda med tangentbord eller skärmläsare.

Underhåll och kvalitet

Tillgängliga komponenter är ofta enklare att:

• testa systematiskt
• dokumentera
• återanvända
• lämna över
• kontrollera efter senare ändringar

När knappar, modaler, formulär och navigation följer tydliga standarder minskar behovet av att lösa samma fel på nytt i varje kampanj.

Vanliga problem jag ser i praktiken

Tillgänglighetsbrister behöver inte vara tekniskt komplicerade. Många uppstår genom design- och utvecklingsbeslut som verkade oskyldiga var för sig:

• ljusgrå text som såg bra ut i Figma men inte fungerar på en vanlig skärm
• ikonknappar utan tillgängligt namn
• specialbyggda rullgardinsmenyer som inte kan användas med tangentbord
• karuseller som rör sig automatiskt utan tydliga kontroller
• rubriknivåer valda efter utseende i stället för struktur
• länkar som bara heter ”Läs mer”
• felmeddelanden som enbart markeras med röd färg
• bilder vars filnamn används som alternativ text
• videor utan textning
• PDF-filer som enda källa till viktig information
• cookie- och chattlösningar som fångar fokus
• animationer som inte respekterar inställningen för minskad rörelse

Automatiska verktyg kan hitta vissa av problemen. Andra kräver manuell testning och förståelse för uppgiften användaren försöker slutföra.

Så skulle jag prioritera en vanlig företagswebbplats

Du behöver inte åtgärda allt samtidigt. Börja med användarresorna där en barriär får störst konsekvens.

1. Testa huvudflödena med tangentbordet

Gå igenom:

• navigation
• prioriterade tjänstesidor
• kontaktformulär
• bokning eller köp
• inloggning
• modaler och cookie-inställningar

Använd bara Tab, Skift+Tab, Enter, mellanslag och piltangenter. Kontrollera att allt går att nå och använda, att fokus är synligt och att ordningen är logisk.

2. Åtgärda formulären först

Formulär är ofta den sista barriären före en förfrågan eller beställning. Kontrollera etiketter, instruktioner, felmeddelanden, fokusordning och bekräftelse efter inskick.

Använd inte platshållartext som enda etikett. Den försvinner när användaren börjar skriva och kan vara svår att tolka.

3. Kontrollera kontrast med verkligt innehåll

Testa mer än huvudsektionen:

• vanlig brödtext
• små hjälptexter
• länkar
• knappar
• felmeddelanden
• text över bilder
• navigation och sidfot
• lägen som hover, fokus och inaktiv

Kontrastproblem uppstår ofta när färger från designsystemet används i kombinationer som ingen har testat.

4. Granska struktur och semantik

Varje sida bör ha en begriplig dokumentstruktur:

• en tydlig huvudrubrik
• logisk ordning på underrubriker
• riktiga listor för listinnehåll
• knappar för handlingar och länkar för navigation
• landmärken som header, nav, main och footer
• beskrivande sidtitlar och länktexter

Semantisk HTML ger både webbläsare och hjälpmedel bättre information utan att det visuella uttrycket behöver förändras.

5. Granska bilder, ikoner och grafik

Informativa bilder behöver textalternativ som förmedlar deras funktion eller mening. Dekorativa bilder bör inte skapa onödigt brus för skärmläsaren.

Alternativ text ska inte beskriva allt som syns. Den ska förmedla den information användaren annars skulle missa.

6. Testa zoom och större text

Förstora sidan till minst 200 procent och kontrollera att:

• innehållet fortfarande går att läsa
• kontroller inte överlappar varandra
• viktig text inte försvinner
• onödig horisontell rullning inte uppstår
• formulären fortfarande går att använda
• fasta banners inte täcker en stor del av skärmen

7. Kontrollera video, ljud och rörelse

När tal eller ljud förmedlar viktig information behöver användaren textning eller ett relevant textalternativ.

Rörelse bör kunna pausas eller minskas när den kan skapa problem. Respektera användarens inställning för minskad rörelse när animationen inte behövs för funktionen.

8. Testa med en skärmläsare

En grundläggande genomgång med VoiceOver, NVDA eller motsvarande verktyg kan avslöja sådant som automatiska tester missar:

• obegriplig uppläsningsordning
• knappar utan namn
• otydliga fältetiketter
• statusmeddelanden som aldrig läses upp
• dynamiskt innehåll som inte annonseras
• onödigt brus från dekorativa element

För mer omfattande tjänster är testning med personer som själva använder hjälpmedel ännu mer värdefull.

Automatiska verktyg är användbara men otillräckliga

Verktyg som axe och Lighthouse är bra för att snabbt hitta vissa tekniska brister. De kan bland annat upptäcka en del kontrastproblem, saknade namn och ogiltig struktur.

De kan inte på egen hand avgöra:

• om alternativtexten faktiskt är användbar
• om rubrikstrukturen är begriplig
• om fokusordningen är logisk
• om felmeddelandet hjälper användaren vidare
• om ett arbetsflöde går att förstå
• om tangentbordsanvändningen känns förutsägbar
• om innehållet är skrivet på ett begripligt språk

En grön automatisk poäng är därför inte samma sak som laguppfyllelse eller god användbarhet. Den är en datapunkt i en bredare granskning.

Avvägningar det lönar sig att vara ärlig om

Full granskning eller stegvis förbättring

En enkel marknadsföringswebbplats och en komplex bokningsplattform har olika risk. Om allt inte kan åtgärdas samtidigt bör du prioritera funktioner som levererar tjänster, hanterar köp eller skapar förfrågningar.

Stegvis arbete behöver ändå en plan. Annars blir ”vi tar det senare” ett av tecknen på att webbplatsen behöver en uppgradering.

Visuell profil eller läsbarhet

Ett varumärke kan vara särpräglat utan tunn grå text, låg kontrast och ständig rörelse. Tillgänglighet tar inte bort kreativitet, men tvingar fram tydligare beslut om vad som faktiskt är viktigt.

Egen kod eller tredjepartslösningar

Du kan bygga en stabil webbplats och fortfarande få problem genom:

• chatt
• cookie-banner
• bokningsverktyg
• betalningslösningar
• kartor
• videospelare
• inbäddade formulär

Dessa delar måste ingå i testningen. Användaren bryr sig inte om vilken leverantör som äger felet.

Teknisk överensstämmelse eller verklig användbarhet

En lösning kan klara många formella tester och ändå vara onödigt komplicerad. WCAG är en nödvändig referenspunkt, men god tillgänglighet kräver också tydligt innehåll, förutsägbar navigation och verklig användartestning.

Hur verkliga framsteg ser ut

Meningsfull förbättring kräver inte att hela webbplatsen blir perfekt på en gång.

Goda framsteg kan innebära att:

• kontakt- och beställningsformulär fungerar med tangentbord och skärmläsare
• huvudnavigationen har synligt fokus och logisk ordning
• primära uppmaningar är tydliga och läsbara
• prioriterade sidor har en begriplig rubrikstruktur
• videor med viktig dialog har textning
• teamet vet hur det publicerar mer tillgängligt innehåll
• nya komponenter testas innan de återanvänds på flera ställen

Det minskar verkliga barriärer nu och gör framtida förbättringar billigare.

Tillgänglighet bör inte vara ett engångsprojekt precis före lansering. Den behöver ingå i design, utveckling, innehållsarbete och kvalitetssäkring så att samma fel inte byggs in igen.

Vill du veta hur tillgänglig webbplatsen är i dag?

Kontakta mig för en fokuserad tillgänglighetsgranskning. Du får en prioriterad översikt över verkliga barriärer, vilka användarresor som bör åtgärdas först och vad som kan planeras som nästa steg.