Manuelle tester

Testing for universell utforming innebærer blant annet manuell testing, brukertesting og automatiserte verktøy. Det finnes mange ulike testverktøy og ingen fanger opp alt av utfordringer, så det er smart å bruke flere ulike testverktøy og også være klar over at de automatiserte løsningene må suppleres med manuell testing.

Brukertesting

Kjør brukertester med folk! Finn brukere med ulike utgangspunkt for å bruke løsningen din. Spesielt viktig er det å teste med brukere av skjermleser og tastatur.

Simulering

Det finnes flere verktøy som prøver å simulere ulike funksjonsnedsettelser. Det anbefales å teste noen av disse verktøyene, fordi det er en fin måte å få litt mer forståelse hvordan digitale løsinger oppleves av ulike brukere:

Skjermleser

Skjermlesere hjelper brukere med nedsatt syn å oppfatte innhold og navigere digitale løsninger. Det finnes ulike verktøy som er beregnet til bruk i ulike nettlesere og operativsystemer. Disse oppfører seg litt forskjellig, så det er lurt å teste med flere verktøy. De mest kjente skjermlesere er JAWS, VoiceOver og NVDA.

Test om innholdet blir fremstilt på en logisk og tiltenkt måte. Pass på at ikke skjermleseren hopper over viktig informasjon eller funksjoner.

For å teste ut om løsningen er mulig å betjene ved hjelp av tastatur bør dette testes manuelt. Dette kan du gjøre slik:

  • “Tab” er fremover
  • “Tab” + “shift” er bakover
  • “Space” for å ta et valg
  • “Enter” for å aktivere funksjon
  • Bruk piltaster for å navigere

Automatiske tester

Mange tester er nettleserutvidelser som er enkle å kjøre både under utvikling og for andre når nettsiden er ute. Det er viktig å være klar over at automatiserte testverktøy bare finner ca 30% av feilene i digitale løsninger. Det er derfor svært viktig med manuelle tester og brukertesting som en del av testprosessen.

Nettleserutvidelser

Sjekk mange WCAG-krav med Wave. Denne er for alle som liker brukervennlige verktøy:

Andre verktøy tester mer enn Wave og er mer tekniske, anbefales for utviklere:

Og sjekk fargekontraster med:

axe cli

Vi kan anbefale å installere axe-cli for rask test av WCAG-kravene under utviklingsprosessen.

Du vil trenge Node og NPM. Installer globalt eller i ditt prosjekt:

$ npm install @axe-core/cli -g

Kjør prosjektet ditt og test siden du ønsker å teste, man kan legge til flere paths for å teste flere sider:

$ axe http://localhost:3000 http://localhost:3000/komponenter/badge

Du vil få feilmeldinger i terminal med en link til en side som hjelper deg med å fikse feilen.


  Violation of "landmark-no-duplicate-banner" with 1 occurrences!
    Ensures the document has at most one banner landmark. Correct invalid elements at:
     - #pkt-header
    For details, see: https://dequeuniversity.com/rules/axe/4.4/landmark-no-duplicate-banner

Jest axe

Du kan lage egne UU-tester med jest-axe

Disse kan inkluderes som en GitHub action. Les mer om dette i denne artikkelen om automatisering av uu-testing.

Cypress axe

Du kan lage cypress-tester med cypress-axe.

Disse kan inkluderes som en GitHub action. Les mer om dette i denne artikkelen om automatisering av uu-testing.

Robust løsning

En robust løsning er om koden er uten store syntaksfeil, at man bruker HTML5-semantikk, og ARIA-roller om HTML5 ikke er tilstrekkelig.

Bruk verktøy for å analysere koden for syntaksfeil, for eksempel ESLint. Eller kjør kode eller ferdig nettside med:

Les mer