Hva bør testes?
Du bør teste en stor nok mengde innhold til at du kan ta stilling til om kravene er oppfylt eller ikke. Er det få sider på nettstedet, bør alle sider testes. På et større nettsted kan du ta et utvalg sider som dekker så bred funksjonalitet og variasjon i innhold som mulig. Vi anbefaler å teste:
- Alle maler, komponenter og sidetyper
- Alle innholdstyper (f.eks. bilde, video, lyd, tabell og grafer)
- Viktigste og mest brukte sider
Hvordan teste?
Testingen kan deles opp i manuell og automatisk testing. Begge må gjennomføres for å avdekke flest mulig feil. Det er anbefalt å starte med manuell testing før du sjekker siden med automatiske verktøy. Du blir fort sittende å tolke feilmeldinger dersom du starter med automatiske verktøy først.
Når man tester uu er det kravene i man tester etter. Det er anbefalt at du setter deg inn i kravene for å ha oversikt, men det er fort gjort å gå seg vill i lovtekster og WCAG-karakterer. Det er ingen ting i veien for å begynne testingen uten å ha pugget WCAG.
1. Manuell testing
⌨️ Naviger siden med kun tastatur. Bruk tab-tasten for å se om du kommer deg frem.
- Det skal finnes en snarveilenke som tar deg rett til hovedinnholdet om siden har mange menylenker
- Du skal kunne nå og bruke alt viktig innhold
- Det skal bli markert tydelig med fokus hvor du er.
- Du skal kunne navigere avkrysningsbokser og i menyer med piltastene.
- Du skal kunne aktivere lenker, knapper og avkryssningsbokser med enter/mellomrom.
🔍 Zoom siden 400%. Sett nettleseren i fullskjerm. Bruk zoomfunksjonen i nettleseren (ctrl eller cmd, +) til 400%.
- Du skal kunne lese og bruke innholdet uten at du trenger å skrolle horisontalt
- Siden skal skalere riktig. Innhold skal ikke være kuttet
🔍 Forstørr teksten 200%. Du kan sette zoom text only i firefox instillinger, eller bruke en plugin som Zoom text only for din nettleser.
- Tekst skal skalere riktig med resten av innholdet
- Tekst eller innhold skal ikke bli kuttet
🧐 Inspiser siden visuelt og i koden. Hvordan er innholdet strukturert? Husk at det finnes krav for ulike typer innhold.
- Bilder skal alt-tekst
- Bilder brukt som dekorasjon skal ikke ha alt-tekst
- Overskrifter må være strukturert med riktig nivå (H1–H6)
- Lenker må ha en forståelig lenketekst
- Skjemafelt må ha labels assosiert med feltet
- Video må ha tekstalternativ
- Lyd må ha tekstalternativ
- Rekkefølgen på innholdet skal være logisk
- Kontrastforhold må være tilstrekkelig på tekst og komponenter
2. Test siden med automatiske verktøy
Du kommer et stykke med automatiserte tester, men husk at verktøyene aldri vil kunne finne alle feilene. Verktøyene fungerer litt forskjellig.Bruk gjerne flere for å avdekke flest mulig feil.
-
- Nettleser-plugin som viser alle overskrifter med nivå på siden. Feil blir markert med rødt
-
- Kraftig nettleser-plugin med automatisk sjekker, oversikt over fokusrekkefølge, overskrifter, landemerker, alt-tekst med mer.
-
- Nettleser-plugin som visualiserer skjermleserbruk. Nyttig for å finne de fleste potensielle problemer med struktur, navigering og tekstalternativ.
-
- Nettleser-plugin som finner de fleste uu-brudd. Den viser også hvor feilen er på en god måte.
- Merk at denne også registrerer brudd på WCAG 2.2.
-
- Nettleser-plugin for å finne uu-problemer. Ligner på Siteimprove
- Lenker til gode hjelpesider som utdyper hva som er problemet, hvor kritisk det er og hvilke brukergrupper som blir påvirket.
-
- Nettleser-plugin for å finne uu-problemer. Visualiserer i
-
- Bruker aXe til å finne a11y problemer
-
- Nyttig verktøy for Chrome. Tester tekstskalering (WCAG 1.4.4)
-
- Verktøy for å sjekke tekstavstand i Chrome (WCAG 1.4.12)
-
- Desktop-klient for Mac og Windows
- Sjekker WCAG-kravene 1.4.3, 1.4.6 og 1.4.11
-
- Effektivt nettbasert verktøy for å finne farger med godkjent kontrastforhold.
- Ved å dele inn fargekartet i soner blir det enkelt å tweake fargene så du finner en AA eller AAA-nyanse som passer.
-
- Simulerer fargeblindhet
- Desktop-klient for Mac, Windows og Linux
3. Test siden med skjermleser
📢 Naviger siden med skjermleser. Her navigerer du også med tab-tasten, men det finnes flere funksjoner. Når du bruker skjermleser skal du få lest opp den viktigste informasjonen man kan se. På denne måten kan man enkelt finne ut om en nettside er kodet riktig eller ikke.
- Viktige bilder skal ha et tekstalternativ (alt-tekst)
- Uviktige bilder (dekorasjon), skal ikke ha et tekstalternativ (tom alt-tekst)
- Man skal skjønne hva komponenter er (knapper, lenker, meny, lister osv.)
- Man skal skjønne hvilken tilstand komponenter har (aktivert, markert, utvidet osv.)
- Viktige oppdateringer og feilmedliger skal annonseres (feil input, varslinger, dynamisk søk)
- Skjemafelt skal ha en forståelig ledetekst assosiert med feltet (label)
På Mac er VoiceOver mye brukt av synshemmede og du kan fint teste med denne. På Windows er NVDA mest brukt. Du kan også prøve deg frem med Widows sin innebygde skjermleser.
VoiceOver guide
Skru på/av – cmd + f5
Pause – ctrl
Les neste interaktive element – tab
Les neste element – ctrl + option + pil høyre
Gå til neste overskrift – ctrl + option + cmd + H
NVDA guide
Skru på – ctrl + alt + N
Sku av – insert + Q
Pause – ctrl
Les neste interaktive element – tab
Les neste element – pil ned
Gå til neste overskrift – H
Windows narrator guide
Skru på – win + ctrl + enter
Skru av – win + ctrl + enter + esc
Pause – ctrl
Les neste interaktive element – tab
Les neste element – caps lock + pil høyre
Gå til neste overskrift – H
4. Dokumenter testingen underveis
Dokumenter funnene du gjør underveis. Beskriv feilen så godt du kan, gjerne med skjermbilder, info om nettleser og hvilket verktøy du eventuelt oppdaget feilen med. Da blir det enklere for den som skal fikse det å reprodusere feilen.
Nyttig lesing
-
.
-
.
-
, hvordan kode tilgjengelige nettsider.
- .
- , produsenten bak verktøyet Axe.