Börja krypa innan du kan gå
Låt mig vara den första att säga det: en checklista kan aldrig ersätta ett systematiskt, kontinuerligt arbete med inkluderande design. Checklistan kan däremot ge dig ett snabbt sätt att bocka av det mest grundläggande, sådant som inte bör ha missats från början.
😍
Jag vill att du ska få mer tid över till att arbeta medvetet med att nå fler människor och ta hänsyn till olika typer av funktionsnedsättningar och funktionsvariationer.
Checklistan belyser också ett möjligt sätt tänka kring tillgänglighet i förhållande till WCAG: utvärdera varje sida och komponent, men alla riktlinjer är förstås inte relevanta för alla sidor. Använd dig av de relevanta kriterierna och gå igenom checklistan varje gång du publicerar nytt innehåll.
Kom alltid ihåg: tillgänglighet verifierar du på riktigt sedan med expertis, och med studier där du inkluderar människor med konkreta, upplevda funktionshinder.
Checklistan
| Riktlinje | Bedömning |
|---|---|
| Checklista framtagen av Per Axbom, läs mer på digitill.se | |
| Enskilda element på en sida | |
Det finns genomtänkta textalternativ för allt innehåll som inte är text. alt-text för bilder, texter som beskriver innehåll i video, och så vidare. | |
Om bilder inte är betydelsebärande så är alt-texten tom. Attributet måste dock finnas. | |
| Bilder används inte för att representera enbart textinnehåll. | |
| Samtliga element har tillräckligt hög kontrast (text, rubriker, knappar, bilder). | |
| Färg används inte som enda sätt att urskilja eller särskilja visuellt innehåll. Enbart färg räcker till exempel alltså inte för att indikera länkar. | |
| Instruktioner till användaren förlitar sig inte enbart på form, storlek eller visuell placering Detta är exempelvis fel: ”klicka på den fyrkantiga ikonen” eller ”läs instruktionerna i kolumnen till höger”. | |
| Hela sidan | |
Sidans titel (title) är logisk och intuitiv. Den ska gå att förstå utanför sitt sammanhang. | |
Det går att navigera med tab-tangenten från start till slut och samtliga länkar och trigger-områden (klickbara element/ytor) går att aktivera med tangentbordet, och de aktiveras i en logisk följd. Det är samtidigt visuellt tydligt vilken länk som är aktiverad. | |
| Det finns en tydlig struktur i dokumentet. Det innebär bland annat att rubriknivåer h1-h5 används och innehållet kommer i en logisk följd, även i koden. | |
| Det går, från sidans topp, att hoppa direkt till sidans huvudinnehåll. Syftet är att hoppa över header/meny för att undvika att de blir upplästa vid varje omladdning av webbtjänsten. En tydlig rubrik i koden kan räcka. | |
| Länkar eller knappar med samma text som går till olika platser går direkt att särskilja. | |
| Tabeller används för tabulär data. Tabeller används inte enbart för layout. | |
| När ett element på sidan får fokus (inget klick) så förändras inte sidan på ett sätt som kan desorientera användaren. Det ska inte ske någon förändring av övrigt innehåll på sidan, det startar alltså inte en popup eller lightbox, tangentbordets fokus förändras inte, och så vidare. | |
| Betydande fel i validering av HTML/XHTML undviks. Kan testas med http://validator.w3.org/ | |
| Formulär | |
I formulär används rätt label för rätt element. Detta kan testas genom att klicka på rubriken vilket ska aktivera inmatningsfältet så att markören placeras där. | |
Obligatoriska formulärfält som kräver en viss längd, ett visst format eller ett visst värde upplyser om det inom etiketten (label) för det formulärfältet, eller om det inte finns en etikett så inom ”title”-attributet för fältet. | |
| Om de används så presenteras felmeddelanden vid validering på ett effektivt, intuitivt och tillgängligt sätt. Felet är tydligt identifierat, det finns snabb access till elementet/fältet där felet återfinns och användaren kan lätt åtgärda felet och skicka om formuläret. | |
Det finns tillräckligt med etiketter, vägvisare och instruktioner för obligatoriska interaktiva element på sidan. Dessa kan vara i form av instruktioner, exempel, korrekt placerade fältetiketter och/eller användning av fieldset och legend. | |
| Om ett inmatningsfel upptäcks, antingen via klientvalidering eller validering på servern, ges förslag som påvisar hur felet kan rättas till. | |
| Media/rörlig grafik | |
| Det finns textalternativ som förklarar budskapet i eventuellt video/ljud. | |
| Det finns stöd för att pausa, stoppa, tysta eller justera volymen för ljud som spelas i mer än 3 sekunder. | |
| Innehåll som automatiskt blinkar eller rullar i perioder längre än 5 sekunder kan stoppas, pausas eller döljas av användaren. | |
| Inget innehåll på sidan blinkar mer än 3 gånger per sekund såvida inte blinkandet är tillräckligt litet, med låg kontrast och inte har för mycket rött. | |
| Automatisk utloggning och tidsgränser | |
| Om en sida har en tidsgräns så får användaren alltid möjlighet att förlänga, stänga av eller justera den tidsgränsen. Detta gäller inte för live-event (exempelvis en auktion) eller om tidsgränsen är mer än 20 timmar. | |