Det nya EU-direktivet när det gäller tillgänglighet ställer större krav på att din hemsida ska vara tillgänglig och optimerad för personer med olika typer av funktionsnedsättningar. Direktivet ger väldigt tydliga anvisningar och vi vill dela med oss av en checklista vi har för att testa.
Översikt över webbdirektivet hittar du här: https://webbriktlinjer.se/lagkrav/webbdirektivet/
20 % av alla besökare har en nedsättning
Var 5:e besökare har någon form av nedsättning som gör att deras upplevelse av webbplatsen inte blir optimal. Nedsättning kan 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
- Kognitiv nedsättning – dyslexi, intellektuell, ADHD
- Neurologisk nedsättning – epilepsi, MS, stroke
- Personer med åldersrelaterade begränsningar.
På Triggerfish tycker vi det är viktigt att oavsett om en webbplats lyder under lagligt krav eller, bör man ta hand om ovan personers nedsättningar.
Där teknik möter content och design
WCAG skär genom alla tre aspekterna av en webbplats och ställer krav på både utvecklaren, designern och den som är ansvarig för innehåll.
Kognitiv nedsättning – hur ser en bra webbplats ut?
- Innehåll ska inte blinka eller röra sig eller ha störande ljud
- En bra sökfunktion med stavningshjälp
- Logiskt upplägg, igenkänning
- Text ska kunna läsas upp
- Lätt att hitta kontaktuppgifter
- Ska fungera i telefonen
- Inga pop-uprutor
- Bilder ska vara relevanta
- Enkel och ren design
- Tydligt språkbruk
Verktyg för att testa
Det bästa sättet för att testa tillgängligheten är att använda sig både av manuell och automatisk testning.
Följande verktyg rekommenderar vi:
- Web AccessibilityToolbar (IE)
- Tota11yInspektor
Fler verktyg hittar du här: https://www.w3.org/WAI/ER/tools/
Checklista för manuell testning
Bilder
- Är dekorativa bilder kodade med alt=” ” 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 ” ”
- Har de bilder som är klickbara en alternativ text som beskriver vart länken leder?
Video
- Används film 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å utan hjälp av 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 table, th och td?
- I de fall det finns behov av beskrivning eller rubrik, finns det uppmärkt med 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 UL,LI?
- Finns det onödiga kodade listor som det inte finns något behov av? Kolla med accessibility toolbar i IE.
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, så att något försvinner eller blir 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 tabba genom sidan.
- Är tabbfokus och muspekarfokus tydligt? Testa gärna i två olika webbläsare och se om det är olika.
Att hoppa över innehåll
Finns det länk som leder till huvudinnehållet? Är innehållet grupperat med strukturelement, landmärken, rubriker?
Sidtitlar
Är sidtiteln beskrivande? Har sidtitlar konsekvent med huvudrubrik och länk till sidan? Framgår webbplatsägare?
Länkar
Vart länken leder framgår av länktexten själv. 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? Är innehållet på sidan bra grupperat med rubriker? Har varje ny sektion med innehåll en ny rubrik?
Är rubrikerna hierarkiskt ordnade? Är rubrikernas texter beskrivande? Kontrollera med Tota11y.
Språk
Finns det huvudsakliga språket angivet? Se i kod eller använd Accessibility Toolbar i IE. Finns annat språk och är det i så fall uppmärkt med korrekt språk (lang=”en”)?
Validerar koden?
Navigering
Ä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?
