Hoppa till innehållet
← Alla guider

Så testar du din webbutik mot WCAG 2.1 AA själv: verktyg, arbetsgång och vad verktygen missar

En arbetsgång för att testa webbutikens köpresa mot WCAG 2.1 AA på en eftermiddag, och vad automatiska verktyg inte hittar.

Det här är teknisk vägledning och inte juridisk rådgivning. Hur tillgänglighetslagen ska tolkas i ditt fall avgör Post- och telestyrelsen (PTS), så vänd dig dit vid osäkerhet.

En fullständig granskning av en webbutik görs av någon med utbildning och en dag att avsätta. Den här guiden beskriver en enklare arbetsgång som du eller din webbyrå kan köra på en eftermiddag, och som hittar de fel som oftast stoppar kunder. Vad lagen kräver finns i Tillgänglighetslagen för e-handel, och sju vanliga fel med rättningar i HTML finns i De vanligaste tillgänglighetsfelen i kassan. Här handlar det om hur du hittar felen själv.

1. Välj sidorna

Testa inte hela butiken. Välj fem till åtta sidor som tillsammans täcker köpresan:

  • startsidan
  • en kategorisida med filter
  • en produktsida med varianter, till exempel storlek
  • varukorgen
  • kassan, från första steget till orderbekräftelsen
  • inloggning eller kundkonto
  • kontaktsidan

Sidor som byggs av samma mall får samma fel. Testar du en produktsida har du oftast testat alla.

2. Kör ett automatiskt verktyg

Tre verktyg som är gratis att använda är axe DevTools (tillägg för webbläsaren), Lighthouse (finns i Chrome) och WAVE. Kör ett verktyg på varje sida i listan, och prova gärna två, eftersom de hittar olika saker.

Verktygen hittar sådant som går att avgöra av koden: bilder utan alternativtext, formulärfält utan etikett, knappar utan namn, saknad språkmarkering på sidan och en del kontrastfel. Det går fort och ger en lista du kan lämna direkt till den som bygger butiken.

Ett problem i kassan syns inte förrän du har kommit dit. Fyll därför i kassans steg och kör verktyget i varje steg, även när felmeddelandena visas.

3. Gå igenom med tangentbordet

Lägg undan musen och gå igenom köpresan med Tab, Skift+Tab, Enter, mellanslag och Esc. Titta efter fem saker:

  1. Du ser hela tiden var fokus är. Försvinner markeringen bryter det mot kriterium 2.4.7.
  2. Tabordningen följer det du ser på skärmen. Hoppar fokus i sidan utan logik bryter det mot 2.4.3.
  3. Allt som går att klicka går att nå och aktivera. Menyer, filter, variantväljare och bildgallerier är de vanligaste ställena där det fallerar.
  4. Du kan lämna varje ruta och fönster. Fastnar du i en kundvagnsruta eller en cookieruta är det en tangentbordsfälla (2.1.2).
  5. Efter ett felmeddelande hamnar du vid felet eller kan hitta det utan att börja om.

Det här testet tar ungefär en kvart och hittar fel som inget automatiskt verktyg ser.

4. Testa med skärmläsare

Använd NVDA på Windows (gratis) eller VoiceOver på Mac och iPhone (finns inbyggd). Lägg tjugo minuter på kassan. Du behöver inte kunna alla kommandon: lyssna efter om varje fält säger vad det är för något, om knapparna har ett namn, om felmeddelanden läses upp när de dyker upp och om du får veta när ett steg har bytts.

Det känns ovant de första gångerna, men det du letar efter är enkelt: nämns något som du inte ser, eller nämns inte något du ser, finns det ett fel att åtgärda.

5. Förstora, mät kontrast och titta på rörelse

Tre kontroller som går snabbt:

  • Zoom. Förstora sidan till 200 procent och sedan till 400 procent i en smal vy. Innehållet ska finnas kvar utan att du behöver scrolla i sidled, utom i tabeller och liknande. Knappar får inte hamna ovanpå varandra.
  • Kontrast. Vanlig text behöver kvoten 4,5:1 mot bakgrunden, stor text och gränser på fält 3:1. Mät med webbläsarens utvecklarverktyg eller ett kontrastverktyg som Colour Contrast Analyser, och kontrollera även hur knapparna ser ut när de har fokus eller muspekaren över sig.
  • Rörelse. Bildspel och videor som startar av sig själva ska kunna pausas. Blinkande innehåll bör inte finnas alls.

6. Formulär och felmeddelanden

Skicka in kassan med flera fält fel avsiktligt. Skriv ett postnummer med bokstäver, lämna e-postadressen tom och ange ett kortnummer som inte stämmer. Varje felmeddelande ska med text säga vad som är fel och hur det rättas, och inte bara visas med röd färg (1.4.1, 3.3.1, 3.3.3). Hamnar du vid felen eller läses de upp av skärmläsaren? Om inte är det en av de vanligaste orsakerna till att kunder lämnar kassan.

Vad automatiska verktyg missar

Ingen vet exakt hur stor andel av felen som går att hitta automatiskt, och siffrorna beror på hur man räknar.

Den brittiska statens digitala tjänst GOV.UK testade 2018 tretton automatiska verktyg mot en sida med 142 felaktigheter som byggts in med avsikt. Det bästa verktyget hittade 40 procent, det sämsta 13 procent. Deque, som tillverkar axe, publicerade 2021 en studie av över 2 000 granskningar och knappt 300 000 fel. Där hittades 57 procent av felen med deras egna automatiska regler, räknat på antalet förekomster. Studien bygger på Deques egna granskningar, och vissa fel, som saknad alternativtext, är mycket vanliga, vilket drar upp andelen.

Slutsatsen blir densamma oavsett vilken siffra du väljer: en betydande del av felen kräver att en människa tittar. Det gäller bland annat:

  • om en alternativtext är rimlig eller bara ett filnamn (1.1.1)
  • om fokusordningen är logisk (2.4.3) och om fokus syns (2.4.7)
  • om rubrikerna beskriver innehållet (2.4.6)
  • om en länktext förklarar vart länken leder (2.4.4)
  • om felmeddelanden går att förstå och rätta (3.3.3)
  • om innehåll går att använda vid 400 procents zoom (1.4.10)

Därför räcker det inte att köra Lighthouse och få ett grönt resultat. Ett högt poängtal betyder bara att verktyget inte hittade något mer.

Hur ofta och vad du dokumenterar

Testa om när butiken ändras på ett sätt som påverkar köpresan, till exempel nytt tema, ny kassa eller nytt betaltillägg, och annars minst en gång om året. Ett tillägg som uppdateras kan ändra kassan utan att du märker det.

Skriv ner vad du har testat, vilka sidor, vilket verktyg, datum och vad du hittade och rättade. Det är underlaget till din tillgänglighetsredogörelse, som beskrivs i guiden om tillgänglighetslagen. Skriv bara det du faktiskt har kontrollerat, och ange vilka brister som återstår och hur kunden kan nå dig om något inte fungerar.

Om AccessAudit

AccessAudit på butik.nightwave.se/tillganglighet gör en teknisk granskning av upp till 30 sidor i din webbutik mot WCAG och levererar en rapport varje månad, för 1 990 kr per månad exklusive moms. Det finns också ett gratis test av upp till fem sidor. Tjänsten kan inte bedöma sådant som kräver en människa, som om en alternativtext är rimlig, och ersätter inte arbetsgången ovan. Det är teknisk granskning och inte juridisk rådgivning.

Källor