Sök

Tillgänglighet enligt WCAG 2.1 med Askås 12

Tillgänglighetsdirektivet, webbdirektivet, WCAG. Begripliga, hanterbara och robusta webbplatser. Det är mycket på gång gällande digital tillgänglighet för närvarande. Vi reder ut begreppen och slår samtidigt fast att Askås e-handelsplattform i stor utsträckning är förberedd för att möta de höjda kraven på tillgänglighet som börjar tillämpas 2025. 

Jennifer Nilsson och Caroline Lindström, frontend-utvecklare på Askås.

Caroline Lindström och Jennifer Nilsson

28 juni 2025 ska EU-direktivet om tillgänglighet, det så kallade tillgänglighetsdirektivet, börja tillämpas som en del av den svenska lagstiftningen. Direktivet och i förlängningen lagen ställer höjda krav på att webbplatser ska vara tillgängliga för personer med olika typer av funktionsnedsättningar.

Under det senaste halvåret har Askås utvecklare jobbat för att i ett tidigt skede anpassa och förbereda e-handelsplattformen och de grafiska mallarna inför det som av allt att döma blir ett lagstadgat krav om drygt två år.

– Det känns jättebra att vi redan kommit så här långt med tillgänglighetsarbetet. Detta ger oss möjlighet att börja lansera nya kunder med de anpassade mallarna. Dessutom har vi skapat tid och utrymme för att hinna uppdatera våra befintliga kunder i god tid innan 2025, säger Askås VD Tord Larsson-Steen.

Som grund för vårt anpassningsarbete och interna utveckling har vi använt WCAG – Web Content Accessibility Guidelines. WCAG innehåller internationella rekommendationer och riktlinjer för hur tillgänglighet ska erbjudas online.

Rekommendationerna inom WCAG är indelade i fyra områden eller huvudprinciper.

1. Möjligt att uppfatta. En användare ska kunna uppfatta och ta till sig information och olika webkomponenter oavsett funktionsnedsättning.

2. Hanterbar. En användare ska kunna hantera olika komponenter i gränssnittet och navigera på webbplatsen. Exempelvis ska det vara möjligt att navigera via tangentbordet.

3. Begriplig. Information och webbplatsen som helhet ska gå att förstå och vara förutsägbar. Innehållet och navigationen ska vara enkel att begripa och konsekvent.

4. Robust. Webbplatsen och innehållet ska vara kompatibelt och fungera oavsett skärmstorlek och ihop med olika typer av externa hjälpmedel, exempelvis skärmläsare, tangentbordsstyrning och punktdisplayer.

De olika riktlinjerna inom de fyra områdena är i sin tur indelade i olika nivåer A, AA och AAA. Jennifer Nilsson och Caroline Lindström är frontend-utvecklare på Askås och de berättar hur resonemanget förts och arbetet sett ut gällande tillgänglighetsanpassningen.

– Som ett första steg har vi tagit beslutet att fokusera på riktlinjer inom nivåerna A och AA. Vi gör bedömningen att de åtgärder vi genomfört kommer ge god tillgänglighet för personer med de flesta typerna av funktionshinder, säger Jennifer Nilsson.

Tillgängligheten i fokus

Att designmallarna nu till stora delar är tillgänglighetsanpassade är en väldigt viktig pusselbit för Askås som leverantör och därmed för våra kunder. Sedan krävs det även att varje enskild kund och e-handlare jobbar med tillgängligheten i fokus.

– Så är det absolut. För att en webbplats ska klara tillgänglighetskraven krävs det att kunderna jobbar på ett sätt som främjar tillgängligheten. Det kan handla om allt ifrån att ha ett enkelt språk, att se till att det finns alt-texter på bilder och att rörligt material har undertexter, säger Caroline Lindström.

"Det är jätteviktigt att vi som leverantör visar att vi har koll på regelverket och därmed ger våra kunder möjligheter att leva upp till lagen. När det gäller tillgänglighet handlar det ju dessutom om mänskliga rättigheter och det känns därför självklart att ta detta på största allvar."
Tord Larsson-Steen, VD Askås

Vad har vi utvecklat

Tillgänglighetsanpassning av standardmallen har haft den övergripande målsättningen att en e-handel byggd på mallen ska kunna användas av alla människor oavsett funktionsnedsättningar.

Mycket fokus har lagts på tangentbordsnavigering och stöd för skärmläsare.

Tangentbordsnavigering

Hela mallen är möjlig att tabba sig igenom med tangentbordet. Menyn, artikelgrupper, webbsidor, varukorgen, och alla delar i kassan är kompatibla med tangentbordsnavigering.

Skipplänkar

En skipplänk ger möjlighet att hoppa över delar av sajten. Exempelvis huvudmenyn eller sektioner av kassan. Är slutkunden nöjd med det förinställda valet gällande exempelvis varukorgen eller fraktmetoder är det möjligt att hoppa över den gällande sektionen.

Modaler

En e-handelssajt består av många modaler. Varukorgen, omdömes-popup, loginrutan och sökrutan i mobil är exempel. I standardmallen finns nu stöd för att man ska komma tillbaka till det element som öppnade modalen, exempelvis den specifika köpknapp som öppnade varukorgen.

Statusmeddelanden

Det finns fler meddelanden inlagda som ger bättre feedback till användaren. Exempelvis när man skapar en kundprofil är det visuellt tydligare när man har fyllt i något fel. Det visas tydligt vilket fält som är fel plus en summering längst ner. Användaren får även instruktioner hur ett felaktigt fält ska fyllas i.

Skärmläsare

Det finns en mängd nya fält som gör att sajten fungerar med skärmläsare. Detta innebär att personer med nedsatt hörsel genom meddelanden via skärmläsare kan navigera på och använda sajten.

Generell design

Vissa mindre punkter är justerade gällande design. Exempelvis kontrastfärger som inte var godkända. Breadcrumbs och köpknappens kontrastfärg är exempel på detta.

Bildvisning

Bildvisning på produktsidan har gjorts om. Vi har bytt från Magic zoom till en tabbvänlig version. Den nya bildvisningen ger även möjlighet att använda sig av dubbeltryck för zoom i mobil. Det krävs därmed inte att man använder två fingrar för att zooma.

Responsivitet

Responsiviteten har fått ett lyft och det finns bättre stöd för olika textstorlekar. Om man exempelvis ändrar textstorlek i sin webbläsares inställningar får detta effekt på sajten.

Tillgänglighet i korthet

  • Vad är WCAG?

    Web Content Accessibility Guidelines är internationella riktlinjer och principer som reglerar tillgänglighet för funktionshindrade personer på webben.

    Det finns tre olika nivåer inom WCAG: A, AA och AAA. Nivå A innehåller de mest grundläggande kraven för tillgänglighet och nivå AAA representerar de högsta kraven. Askås ambition är att i första skedet ha ett system som täcker in nivåerna A och AA som till stora delar garanterar god tillgänglighet för personer med de flesta typer av funktionsnedsättningar.

    Den första versionen av WCAG togs fram redan 1999 och har sedan dess genomgått en mängd uppdateringar. Den nu gällande versionen är WCAG 2.1 som togs i bruk 2018.

  • Vad är Webbdirektivet och DOS-lagen?

    Webbdirektivet antogs inom EU redan 2016. Direktivet skapades med syfte att i första hand reglera tillgängligheten för offentliga verksamheters digitala tjänster. DOS-lagen eller Lagen om tillgänglighet till digital offentlig service är en svensk lagstiftning som utgår ifrån webbdirektivet. 

    Webbdirektivet och DOS-lagen grundar sig på WCAG 2.1 och riktlinjer inom nivåerna A och AA.

  • Vad är Tillgänglighetsdirektivet?

    Ett nytt EU-direktiv som slår fast att även privata verksamheters digitala tjänster ska vara tillgängliga. Tillgänglighetsdirektivet grundar sig också på WCAG 2.1 och börjar tillämpas som lag i Sverige 2025.