Test universell utforming i nettside

Det kan virke vanskelig ? sette seg inn i uu-testing og hvilke krav som er gjeldende. Med noen enkle teknikker og litt innsats kommer du langt p? vei med testingen.

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

2. 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.

  • Overskrifter skal v?re kodet som overskrifter og skal brukes trinnvis, fra H1 til H6. Man skal ikke hoppe over overskriftsniv?.
  • 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

3. 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 ogs? litt forskjellig, s? 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.
  • aXe
    • Nettleser-plugin for ? finne uu-problemer.
    • Virker hakket mer moderne enn WAVE, og 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
    • Sjekk spesifikk URL og f? visualisering av problemer og forslag til l?sning
  • Lighthouse
  • Accessibility Insights - av Microsoft
    • Nettleser-plugin (og Windows-program)
    • Bruker aXe til ? finne a11y problemer
  • ARC Toolkit
  • W3Cs kodevalidator (engelsk)

Mer nyttig lesing

Verkt?y for ? teste tekstskalering og linjeavstand

Verkt?y for ? sjekke fargekontrast

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.
  • Colour Contrast Analyser
    • Desktop-klient for Mac og Windows
    • Kan ogs? simulere fargeblindhet
  • Color Oracle
    • Simulerer fargeblindhet
    • Desktop-klient for Mac, Windows og Linux

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. 

Vi anbefaler at du bruker v?rt excel-skjema n?r du skal dokumentere testingen.

Publisert 17. juni 2022 13:46 - Sist endret 1. okt. 2024 10:56