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 to, 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 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-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.
- 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, +) stegvis 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%. Dette gj?r du enklest med et testverkt?y som Zoom text only.
- Tekst skal skalere riktig med resten av innholdet
- Tekst eller innhold skal ikke bli kuttet
? Inspiser siden. 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.
- HeadingsMap
- Nettleser-plugin som viser alle overskrifter med niv? p? siden. Feil blir markert med r?dt
- Silktide
- Kraftig nettleser-plugin med automatisk sjekker, oversikt over fokusrekkef?lge, overskrifter, landemerker, alt-tekst med mer.
- ARIA DevTools
- Nettleser-plugin som visualiserer skjermleserbruk. Nyttig for ? finne de fleste potensielle problemer med struktur, navigering og tekstalternativ.
- 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.
- 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.
- WAVE
- Nettleser-plugin for ? finne uu-problemer. Visualiserer i
- Lighthouse
- Accessibility Insights
- Bruker aXe til ? finne a11y problemer
- ARC Toolkit
- W3Cs kodevalidator (engelsk)
- Zoom text only
- Nyttig verkt?y for Chrome. Tester tekstskalering (WCAG 1.4.4)
- Text spacing editor
- Verkt?y for ? sjekke tekstavstand i Chrome (WCAG 1.4.12)
- Colour Contrast Analyser
- Desktop-klient for Mac og Windows
- Sjekker WCAG-kravene 1.4.3, 1.4.6 og 1.4.11
- 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.
- Color Oracle
- 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 (s?ketreff, feil input, varslinger)
- 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
NVDA guide
Windows narrator guide
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
-
ARIA Authoring Practices Guide, hvordan kode tilgjengelige nettsider.
- Lang ressursliste hos The A11y Project.
- Accessibility Basics – fra Deque, produsenten bak verkt?yet Axe.