Den 1 januari 2019 trädde EU-direktivet om tillgänglighet i kraft. Sedan dess har det ställts högre krav på att webbplatser, appar och dokument ska vara anpassade efter alla användare, inklusive de med någon form av nedsättning. Webbdirektivet är dock otroligt omfattande. Därför kommer här en händig checklista som hjälper dig bocka av det viktigaste när du testar din webbplats för WCAG 2.1 AA.

WCAG är för alla

Visste du att så många som 20% av alla besökare på en webbplats har en nedsättning av något slag? Eftersom det är så pass vanligt är det helt avgörande att alltid utgå från att bygga lösningar, oavsett om det är webbplatser, appar eller enskilda dokument, som alla kan tillgodogöra sig. Det här maximerar värdet av er webbutveckling och ökar samtidigt möjligheten för alla att delta i samhället på lika villkor.

En nedsättning kan till exempel vara:

  • synnedsättning – blinda, synskadade, färgblinda
  • hörselnedsättning – döva, svårt att höra
  • motorisk nedsättning – förlust av kroppsdel, förlamning eller andra fysiska nedsättningar
  • kognitiv nedsättning – dyslexi, intellektuell nedsättning, ADHD
  • neurologisk nedsättning – epilepsi, MS, stroke åldersrelaterade begränsningar

Vad är egentligen WCAG?

Web Content Accessibility Guidelines (WCAG) är internationellt etablerade rekommendationer för tillgängligt innehåll på webben. Rekommendationerna innehåller 78 kriterier som är indelade i tolv riktlinjer som i sin tur kategoriseras inom fyra övergripande principer: möjlig att uppfatta, hanterbar, begriplig och robust. Du kan läsa mer om webbdirektivet och WCAG här: https://webbriktlinjer.se/lagkrav/webbdirektivet/

Checklista för manuell testning av WCAG 2.1 AA

Lever din webbplats upp till direktivets krav? Börja testa med hjälp av dessa punkter.

Bilder

  • Är dekorativa bilder kodade med alt taggen (HTML kod som visar en beskrivande text när bild inte kan visas eller ses av användaren) eller gjorda som bakgrundsbilder?
  • Finns det alternativa texter till bilderna och är dessa i så fall informativa? Skriv bara alt om bilden fyller ett syfte. Annars bör den lämnas tom.
  • Har klickbara bilder en alternativ text som beskriver vart länken leder?

Video

  • Används video som enda informationskälla eller finns alternativ i annat format?
  • Finns textning som alternativ till filmen?
  • Finns behov av syntolkning?

Färger

  • Går innehållet att förstå även om du inte är färgseende?
  • Uppfylls kontrastvärdet 4,5:1 mellan för- och bakgrund på hela sidan?
  • Har symboler och grafiska objekt tillräcklig kontrast? Detta är viktigt om det inte finns alternativ i form av text.

Tabeller

  • Är tabellerna korrekt märkta med HTML taggarna table, th och td?
  • I de fall det finns behov av beskrivning eller rubrik, finns det uppmärkt med HTML taggarna caption och summary?

Listor

  • Är de länklistor som inte är menyer kodade som listor?
  • Är listor som ser ut som listor även gjort teknisk med HTML taggarna UL, LI?
  • Finns det kodade listor som egentligen inte behövs? Kolla t.ex. med Accessibility Toolbar (verktyg för webbläsare som utvärderar innehåll enligt riktlinjer för WCAG).

Zooma

  • Går innehållet att förstora? Testa att zooma in sidan i webbläsaren. Får du ett mobilutseende? Det ska inte bli en horisontell scrollningslist. Innehåll ska inte förstöras, försvinna eller bli svårt att förstå.

Tangentbordsstyrning och fokus

  • Är koden i rätt ordning? Prova att ta bort CSS eller titta i koden.
  • Går tabben i rätt ordning, går allt att nå med tangentbordsstyrning? Testa att navigera genom hela sidan med hjälp av tabbtangenten.
  • Är tabbfokus och muspekarfokus tydligt? D.v.s. det som visuellt visar vart muspekaren är när tabb används. Testa gärna i två olika webbläsare och se om det är olika.

Innehåll, navigering och sök

  • Innehåll ska vara enkelt att ta till sig och inte ha distraherande element, exempelvis pop-up rutor, eftersom de stör och försvårar navigationen och upplevelsen.
  • Innehållet ska gärna vara skrivet i klarspråk för att nå så många målgrupper som möjligt.
  • Är det tydligt vart användaren befinner sig när de har gått ner i strukturen på webbplatsen?
  • Syns det vilket val som är gjort i huvudmenyn/undermenyn? Finns det en navigeringslist/brödsmulelista? Syns det vilken sida som är aktiv i menyn?
  • Det ska finnas en sökfunktion med stavningshjälp.

Hoppa över innehåll

  • Finns det länk som leder till huvudinnehållet? T.ex. en möjlighet att hoppa över innehåll som inte är relevant eller som upprepas på en sida.
  • Är innehållet grupperat med strukturelement, landmärken, rubriker?

Sidtitlar

  • Är sidtiteln beskrivande?
  • Är sidtitlar konsekventa med huvudrubriker och länkar till sidan?
  • Framgår webbplatsägare?

Länkar

  • Framgår det i länktexten var länken leder? Om du vill ange att länken går till en annan webbplats, skriv den i slutet av länktexten.

Rubriker

  • Finns det en H1:a som första rubrik i början av sidan?
  • Är de rubriker som är visuella också kodade som rubriker?
  • Har varje ny sektion eller stycke med innehåll en ny rubrik?
  • Är rubrikerna hierarkiskt ordnade?
  • Är rubrikernas texter beskrivande? Kontrollera gärna med Tota11y (verktyg för automatisk testning).

Språk

  • Finns det huvudsakliga språket angivet? Se i kod eller använd t.ex. Accessibility Toolbar.
  • Finns annat språk och är det i så fall uppmärkt med korrekt språk i HTML koden (lang=”en”)?

Kompatibilitet

  • Sidorna ska vara kompatibla med skärmläsare.
  • Sidorna ska vara helt fungerande i alla tänkbara enheter och skärmstorlekar såsom desktop, surfplattor, bärbara datorer, mobiltelefoner o.s.v.

Validerar koden

Rent allmänt är ett bra tips att sträva efter att skriva så semantisk html-kod som möjligt. Vid behov kan man utnyttja ARIA-attribut (HTML kod innehållandes en uppsättning attribut som definierar sätt att göra webbinnehåll mer tillgängligt) men man kommer ganska långt även utan dem.

Här hittar du tips på ställen där du kan validera kod:

Verktyg för automatisk testning

Om du är osäker på hur din webbplats står sig i förhållande till direktivet så är det bra att testa av den, både manuellt (med hjälp av checklistan ovanför) och automatiskt. Gör det innan du börjar och självklart efter genomfört jobb, då får du svart på vitt att dina insatser ger resultat.

Följande verktyg rekommenderar vi:

Vi arbetar med WCAG utifrån tre aspekter

Utmaningen, och tjusningen, med WCAG är att direktivet skär genom alla tre aspekterna av en webbplats. Det ställer krav på både utvecklaren, designern och den som är ansvarig för innehållet. Det kräver löpande ett nära samarbete under utvecklingsfasen, något vi kommit att bli väldigt bra på eftersom vi ofta jobbar med många WCAG-anpassade webbplatser parallellt.

WCAG är inte raketforskning, egentligen…

…fast vi vet att det kan kännas så. Det är mycket att tänka på och därför finns vi självklart här om du behöver hjälp på traven. Vårt bästa tips är att ta en sak i taget, att lugnt och metodiskt ta sig igenom alla steg. När du är ute på andra sidan kommer du ha en webbplats som är betydligt bättre för ALLA dina användare och det är den stora vinsten! Lycka till och tveka inte att höra av dig om du har frågor.