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 bør deles opp i manuell og automatisk testing. Da avdekker du flest 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 WCAG-standarden 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-kriterier. 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 som lenker, knapper, meny.
- Det skal bli markert tydelig med fokus hvor du er.
- Du skal kunne navigere avkrysningsbokser 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 (under zoom), eller bruke en plugin som for eksempel Resize Text By Equa11y for chrome.
- 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.
- Siteimprove browser plugin
- 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 som ikke er lovkrav enda.
- WAVE
- Nettleser-plugin for å finne uu-problemer. Visualiserer feil på skjermen.
- HeadingsMap
- Nettleser-plugin som viser alle overskrifter med nivå på siden. Feil bruk av overskrifter er et av de vanligste uu-bruddene.
- Colour Contrast Analyser
- Desktop-klient for Mac og Windows
- Sjekker WCAG-kravene 1.4.3, 1.4.6 og 1.4.11
- W3Cs kodevalidator (engelsk)
- Nettside som validerer HTML på hele eller deler av en side.
- Feil bruk av HTML er et vanlig uu-brudd som kan gi store konsekvenser
- Resize Text By Equa11y
- Plugin for Chrome som tester tekstforstørring.
- ARIA DevTools
- Nettleser-plugin som visualiserer skjermleserbruk. Nyttig for å finne de fleste potensielle problemer med struktur, navigering og tekstalternativ.
- aXe
- 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.
- Equa11y
- Plugin for chrome som tester alt-tekst, zoom av tekst, overskriftsnivå osv.
- Caninclude
- Nettside som kan validere gyldig HTML-stuktur på elementnivå.
- Lighthouse
- Accessibility Insights
- Bruker aXe til å finne a11y problemer
- ARC Toolkit
- Text spacing editor
- Verktøy for å sjekke tekstavstand i Chrome (WCAG 1.4.12)
- Color.Review
- 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.
3. Test siden med skjermleser
📢 Naviger siden med skjermleser. Her navigerer du også med tab-tasten, men det finnes flere funksjoner. Deque har en fin veiledning for nybegynnere.
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.
- Man skal skjønne hva komponenter er og hva de gjør (knapper, lenker, meny, lister, søk osv.)
- Man skal skjønne hvilken tilstand komponenter har (aktivert, markert, utvidet osv.)
- Skjemafelt skal ha en forståelig ledetekst assosiert med feltet (label)
- Viktige bilder skal ha et tekstalternativ (alt-tekst)
- Uviktige bilder (dekorasjon), skal ikke ha et tekstalternativ (tom alt-tekst)
- Viktige oppdateringer og feilmedliger skal annonseres (feil input, varslinger, dynamisk søk)
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.
Du kan for eksempel bruke vårt excel-skjema for rapportering av wcag-samsvar.
Nyttig lesing
- WCAG-kravene (Uu-tilsynet).
- Guide for ulike skjermlesere (Deque).
- ARIA Authoring Practices Guide, hvordan kode tilgjengelige nettsider.
- Lang ressursliste hos The A11y Project.
- Accessibility Basics – fra Deque, produsenten bak verktøyet Axe.