Riktlinjer inför den nya lagen om tillgänglighet

Den 28 juni 2025 träder den europeiska tillgänglighetslagen(EAA) om tillgänglighet för produkter, webbplatser och andra tjänster i kraft. Som företag riskerar ni påföljder om de lagstadgade kraven inte uppfylls. För att följa lagen och undvika att utesluta användare rekommenderar vi att ni följer WCAG (Web Content Accessibility Guidelines).

Web Content Accessibility Guidelines (WCAG) är en internationell standard för att skapa webbinnehåll som är tillgängligt för alla, oavsett funktionsnedsättning. Den innehåller ett brett spektrum av riktlinjer för att främja tillgänglighet, och i den här artikeln går vi igenom några av dem. Utöver sina nivåer bygger riktlinjerna för tillgänglighet av webbinnehåll (WCAG) även på fyra grundläggande principer för webbtillgänglighet.

• Robust

• Uppfattbar

• Manövrerbar

• Förståeligt

Dessa principer utgör en solid grund för att bedöma om du uppfyller tillgänglighetsstandarderna.

Robust

För att säkerställa inkludering av alla användare bör webbplatsen vara tillgänglig via olika webbläsare och stödja användningen av olika hjälpmedel.

En skärmläsare är ett verktyg som läser upp text och visuellt innehåll och används av personer med synnedsättning. För att inkludera användare med syn- eller motoriska funktionsnedsättningar som enbart förlitar sig på tangentbord eller röststyrning bör komponenterna beskrivas utifrån sin funktion och sidstrukturen bör vara välorganiserad. Använd till exempel knappelementet i koden där en knapp är avsedd att finnas.

För att validera detta kan du använda valideringsverktyg såsom Markup Validation Service.

Uppfattbar

Det är avgörande att användarna kan uppfatta elementen och förstå innehållets struktur. Visuella medier bör innehålla verbala beskrivningar, färgkontrasten måste vara tillräcklig och ljudinnehållet bör vara tydligt och urskiljbart. Dessa aspekter är särskilt viktiga för användare som är beroende av hjälpmedel.

Innehållet på sidan bör struktureras så att det är lätt för användarna att navigera med en skärmläsare, både när det gäller visuella element och text. Om strukturen saknas kan det vara svårt för användarna att hitta rätt. Tänk på att om samma text upprepas för flera klickbara element kan det bli omöjligt för någon som inte kan se layouten att skilja dem åt.

Alt-text används för att beskriva visuella medier så att skärmläsare kan förmedla det visuella budskapet. Utan alt-text kan bilden inte uppfattas av användare med synnedsättning.

Det finns olika verktyg för att kontrollera om kontrastförhållandet mellan text och bakgrund uppfyller minimikravet på 4,5:1. Det finns dock undantag – till exempel diagram och andra visuella element – som endast kräver ett kontrastförhållande på 3:1. Element som är överlagrade eller placerade inuti varandra bör också ha tillräcklig färgkontrast och måste testas i förhållande till varandra. Verktyg som WebAIM:s Contrast Checker kan användas för att testa färgkontrasten.

Det är också viktigt att inte enbart förlita sig på färg som den enda informationsbäraren på sidan. Strukturella skillnader bör också användas, så att personer med olika typer av färgblindhet kan uppfatta informationen. Dessutom kan du använda verktygstips – text som visas när man håller muspekaren över ett objekt – för att ytterligare förtydliga och förstärka budskapet.

Fungerande

Komponenter i användargränssnittet och navigeringen måste vara användbara. Detta innebär att användarna måste kunna interagera med gränssnittet oavsett sina motoriska förmågor. Till exempel bör alla funktioner vara tillgängliga via tangentbordsnavigering, och interaktiva element bör ha en tydlig fokusindikator som visar var användaren befinner sig på sidan.

• Navigeringen måste kunna hanteras med tangentbordet, eftersom musen i första hand är ett visuellt navigeringsverktyg.

• Ge användarna den tid de behöver för att utföra sina uppgifter.

• Blinkande innehåll bör undvikas, eftersom det kan utgöra en allvarlig risk för användare med fotosensitiv epilepsi.

• Se till att navigeringen är tydlig och enkel för skärmläsare, så att användarna lätt kan förstå och navigera genom innehållet.

• Utforma klickbara områden som är tillräckligt stora så att användare med motoriska funktionsnedsättningar, till exempel ostadiga eller breda rörelser, inte begränsas i sin interaktion.

Mellanrum mellan elementen är fördelaktigt, eftersom det hjälper användarna att enkelt trycka eller klicka på interaktiva komponenter. Detta gäller både mobila pekskärmar och musanvändning på stationära skärmar. Det är viktigt att beakta hur detta fungerar i olika format när sidan är responsiv.

För att undvika upprepande information och hjälpa användarna att förstå sambandet mellan interaktiva element och relaterat innehåll kan en beskrivande länk baserad på rubriken fungera bättre än att upprepade gånger använda en generisk ”läs mer”-länk under texten. Detta ger användare av skärmläsare omedelbar kontext direkt i länktexten, så att de vet exakt vad de klickar på för att gå vidare.

Tangentbordsgenvägar kan öka effektiviteten för många användare, men de är särskilt viktiga för personer med motoriska funktionsnedsättningar eller synnedsättningar, eftersom musen enbart bygger på visuell navigering. Olika enheter och operativsystem kan använda olika genvägskommandon, så det är viktigt att vara medveten om dessa variationer.

Förståeligt

Eftersom kommunikation är det enda sättet att få användarna att interagera med din webbplats bör innehållet vara informativt och lätt att förstå. Det som användaren ser på sidan bör också vara förutsägbart. Därför är det bra att använda designmönster och budskap som är allmänt erkända och välbekanta på webben.

Det är också viktigt att elementen på sidan är konsekventa, så att användarna inte behöver lära sig hur man använder funktionerna om och om igen. Detta minskar onödig kognitiv belastning och gör att det centrala budskapet och den information du vill förmedla får större uppmärksamhet. Skärmläsare måste också kunna tolka innehållet på sidan, så det rekommenderas starkt att testa med en skärmläsare för att säkerställa att allt fungerar som avsett.

Användarna bör kunna pausa i olika skeden och ändå veta var de befinner sig på sidan, så att de kan fortsätta interaktionen när de återvänder. Tydlig navigering är också avgörande när något händer – till exempel om ett felmeddelande visas måste användaren förstå vilken åtgärd som ska vidtas därefter.

Ett exempel på detta är att placera hjälptext före inmatningsfält, så att användare av skärmläsare får meddelandet innan de börjar fylla i fältet.

Det är också viktigt att interaktiva element beter sig på ett förutsägbart sätt, särskilt för användare med kognitiva funktionsnedsättningar. När användaren till exempel klickar på en knapp ska hen föras exakt dit som knappen anger. Därför är det avgörande att innehåll och navigering är samordnade och konsekventa.

Det är lika viktigt att utforma element utifrån etablerade designmönster. Dessutom bör interaktiva element på sidan utformas på ett enhetligt sätt, så att användarna enkelt kan känna igen att en knapp är en knapp och ett inmatningsfält är ett inmatningsfält.

Sammanfattning

När den europeiska tillgänglighetslagen (EAA) träder i kraft den 28 juni 2025 kommer många företag att påverkas och behöva börja anpassa strukturen på sina webbplatser, produkter eller andra system som är under utveckling. Ju tidigare standarden Web Content Accessibility Guidelines (WCAG) följs, desto enklare och mer kostnadseffektivt blir det att genomföra de nödvändiga tillgänglighetsförbättringarna. Därför är det fördelaktigt att så tidigt som möjligt – långt innan lagen träder i kraft – granska om den produkt du äger eller arbetar med uppfyller EU:s tillgänglighetskrav.

Vi genomför tillgänglighetsgranskningar som tydligt visar vad som behöver förbättras för att uppfylla lagkraven.

Titta här om du behöver hjälp.

Denna artikel uppdaterades den 9 januari 2025 av QESTIT:s UX-team.