Tips till webbredaktörer för tillgänglighetssäkring
Tillgänglighetssäkring på webben är avgörande för att skapa en inkluderande digital miljö där alla användare, oavsett eventuella funktionshinder, kan få tillgång till och interagera med webbsajter på ett smidigt sätt.
Ca 20% av Sveriges befolkning har någon form av funktionshinder. Det är ca 2 miljoner människor som på olika sätt riskerar att bli begränsade i sin vardag. Ganska många människor när man tänker på det. För en person med funktionshinder är tillgänglighet helt avgörande för att kunna utföra ett köp, ärende eller ta del av information på en webbsajt. I praktiken kan man fundera på hur många köp på en e-handel som varje dag avbryts på grund av att tillgängligheten brister eller hur mycket av en handläggares tid som går åt till att manuellt guida och leda någon som inte lyckas hitta rätt.
Som vi har skrivit i tidigare artiklar så är det inte bara funktionshindrade användare som tjänar på tillgänglighetsanpassningar (eller som den nya termen är; tillgänglighetssäkring) av digitala plattformar. Vi drar alla nytta av det eftersom det oftast medför bättre användarupplevelser och snabbare och enklare lösningar. Vilket i sin tur kan ge fler besökare, konverteringar och resultera i fler affärer. Det avlastar även offentliga förvaltningars handläggare och är oftast lättare att uppdatera och underhålla.
När vi bygger en webbsajt så handlar tillgänglighetsanpassningar för oss om att implementera tillgänglighetsfunktioner både i designen vi tar fram och i koden vi skriver. Utöver det behöver även det redaktionella innehållet vara anpassat. Det är här du kommer in, när du ska fylla på och administrera innehåll på din webbsajt.
För att underlätta redaktörens arbete har vi här samlat ihop några tips på hur man kan säkerställa att innehållet på en webbsajt är användbart och förståeligt för alla.
Presentera innehållet i en meningsfull ordning
Hur information presenteras skiljer sig åt beroende på om en person läser själv eller får informationen uppläst av exempelvis en skärmläsare. Därför är det viktigt att presentationen av innehåll är maskinläsbart korrekt så att alla kan ta del av innehållet på ett sätt som är logiskt.
Några saker att tänka på för att skapa struktur och överblick på en webbsida:
- Formulera en relevant huvudrubrik (H1) för webbsidan.
- Sammanfatta innehållet på sidan i en ingress.
- Skriv informativa underrubriker (H2, H3 osv) som leder läsaren genom din text. När en text har informativa underrubriker bildar de i sig en överblick och sammanfattning av texten.
- Använd en logisk och genomtänkt disposition i din text. Börja med det som är viktigast.
- Använd punktlistor för att göra uppräkningar tydliga.
- Gör ofta nytt stycke för bättre läsbarhet, cirka tre rader i varje stycke. Det underlättar även läsningen i responsivt läge på mindre skärmar som paddor och mobiltelefoner.
Skriv klarspråk
Alla ska ha rätt att förstå och ta till sig information. Själva språket på en webbsajt ska inte vara ett hinder för besökaren att ta till sig textens budskap.
Tänk på:
- Anpassa texterna till besökarens behov och förkunskaper.
- Använd enkla och tydliga meningsuppbyggnader.
- Använd ett enkelt språk som inte är för komplicerat.
- Använd aktiva verb, de är mer konkreta och talar om vem som gör vad.
- Använder du facktermer och förkortningar bör dessa även förklaras.
- Skriv inte längre än nödvändigt och undvik gärna krångliga meningar och onödigt långa ord.
Skriv beskrivande rubriker och ledtexter
Tydlighet är viktigt för alla, därför ska rubriker och ledtexter göra det lätt att förstå vad en webbsida handlar om. När användaren ska välja eller fylla i uppgifter i ett formulärfält ska det finnas ledtexter som tydligt beskriver vad som ska väljas eller vilken information ett fält ska fyllas med. Även när det finns annan viktig information som användaren behöver veta för att kunna fylla i information på rätt sätt bör det stå i ledtexten.
Ibland måste användaren fylla i fält för att kunna skicka in formulär. Det ska då tydligt framgå vilka fält som är obligatoriska och vilka som är frivilliga. Det räcker inte att bara sätta en asterix på ett obligatoriskt fält, det ska stå “frivilligt” eller “obligatoriskt” bredvid ledtexten för att det ska uppfylla kraven.
Beskriv med text allt innehåll som inte är text
Personer som använder till exempel skärmläsare och punktdisplay behöver beskrivningar av allt innehåll som inte är text eftersom dessa hjälpmedel inte kan tolka foton, bilder och grafik. Tanken med textalternativ, även kallat alt-text, är att den ska kunna ersätta och beskriva en bild eller ett foto för de som inte ser. Exempelvis: “katt i motljus på en strand”. Alt-texter ska ha ett separat fält i admin när man laddar upp en bild.
Skriv tydliga länkar
Tydliga länkar underlättar för alla, men är särskilt viktigt för personer som använder vissa hjälpmedel. Skärmläsaranvändare kan till exempel välja att navigera genom att enbart läsa upp länkarna på en sida. Länkarna behöver vara så tydliga att det går att förstå vart de leder utan att behöva klicka på dem.
Skriv beskrivande sidtitlar
En beskrivande sidtitel hjälper till att tydliggöra vad en webbsida handlar om. Titel visas dessutom i webbläsarens flikar och även i sökresultat och hjälper personer att snabbt få en uppfattning om innehållet.
Använd text, inte bilder av text, för att visa text
Bild av text kan göra det svårare att ta del av innehåll, därför är det oftast bättre att text presenteras som just text istället för som bilder. Undantag finns, exempelvis logotyper eller där det är viktigt för syftet med bilden att text finns med i bilden.
Använd tillräckliga kontraster i komponenter och grafik
För grafiska objekt och komponenter ska kontrastförhållandet mellan delar som behöver kunna särskiljas från varandra visuellt, exempelvis färgen på objektet och färgen på bakgrunden som omger det, vara minst 3:1. När det gäller enklare grafik såsom enfärgade ikoner, räknas hela ikonen som ett grafiskt objekt. Grafik som består av flera linjer, färger och former räknas som flera grafiska objekt.
Teknik för hantering av undertexter
Inspelad video ska erbjuda tillgängliga undertexter så att alla som tar del av videon även kan ta del av informationen/innehållet i videon. Undertexterna ska vara utformade så att de är enkla att aktivera och ta del av, till exempel med hjälpmedel eller genom att undertexten kan bli uppläst.
Alternativ till ljud- och videobaserade tjänster
Personer som inte kan använda ljud- eller videobaserade tjänster ska erbjudas alternativa lösningar för att kunna ta del av den information som dessa tjänster tillhandahåller.
Till exempel:
- Ljudspår som presenterar information motsvarande videoinnehållet.
- Text som presenterar information motsvarande ljudinnehållet.
Syntolka eller erbjud alternativ till videoinspelningar
Att syntolka videoinspelningar eller att återge med en textversion innebär att beskriva vad som händer på skärmen för personer som inte kan se filmen. Det är viktigt eftersom det hjälper personer med synnedsättning att förstå innehållet i filmen.
Hjälpverktyg och andra bra länkar:
Hur man skriver klarspråk: https://www.isof.se/vart-uppdrag/expertomraden/klarsprak
Gratis verktyg för att kontrollera kontraster i bilder: https://www.tpgi.com/color-contrast-checker/
Fler tips och tester för att tillgänglighetssäkra din webbsajt: https://webaim.org/resources/evalquickref/
Gratis simulator (i Chrome) för hur en funktionshindrad person upplever din webbsajt: https://www.funkify.org/
Testa gärna att använda en skärmläsare för synskadade genom att tabba igenom en sajt och få innehållet uppläst. På Mac kan du använda VoiceOver som är den inbyggda skärmläsaren för macOS. För Windows kan du använda den inbyggda lösningen Skärmläsaren.
© 040 2025
Relaterade artiklar:
Vad gäller för tillgänglighets-anpassning?
Tillgänglighetsanpassning? WCAG AA v 2.1? Senast september 2020? Vad är detta och vad gäller?
Nya tillgänglighetsdirektiv i EU från 2025
Från 2025 kommer nya tillgänglighetskrav på kommersiella produkter och tjänster i Sverige, bland annat för e-handlar. Vad innebär detta?
WCAG 3.0 – nästa generation tillgänglighetsstandard
När kommer WCAG 3.0 och vad innebär det? Vad är det för skillnad mot WCAG 2? Vad måste jag göra?