Hopp til innhold

Test med skjermleser

Vi anbefaler å sjekke én skjermleser jenvlig under utvikling og en større oppsamling/testfest av og til hvor man tester flere. Dette fordi brukermassen blant skjermlesere har stor spredning, hvorav de tre mest brukte er NVDA, JAWS og VoiceOver.

Det er mange ulike skjermlesere hvor alle fungerer noe annerledes. Eksempler på populære alternativer er NVDA, JAWS, ORCA, TalkBack på Android og VoiceOver på iphone. Husk at vi har de samme utfordringene med ulike skjermlesere som vi har med ulike nettlesere: selv om de baserer seg på samme standard, så vil det kunne være forskjeller på hvordan ulike skjermlesere forstår koden. Så skal du være helt sikker på kvalitet ved skjermleser bruk må man teste i ulike system.

Jøkul er alltid voksende og vi inviterer alle til å bidra. Har du erfaring med skjermlesere på andre platformer og mulighet til å lage en tilsvarende guide så settes det stor pris på.

VoiceOver

Vi tester VoiceOver hovedsakelig i Safari på macOS. Om VoiceOver er nytt for deg er det nyttig å ta en titt på denne innføringen i VoiceOver (12 minutter lang).

BBC News Accessibility har en fin oversikt med tastatursnarveiene du trenger for testing av VoiceOver. Vi har samlet noen av de viktigste her.

Når du leser disse snarveiene betyr VO vanligvis Control og Option. Du kan bytte så Caps Lock blir brukt som VO inne i Systemvalg, menyvalget Tilgjengelighet, så VoiceOver og så Åpne VoiceOver-verktøy. Til slutt velger du Generelt og endrer VoiceOver-spesialtast.

Bruk snarveien Command + F5 for å starte og stoppe VoiceOver.

Topp fem tastatursnarveier

Topp fem tasatursnarveier
FunksjonTaster
Gå til neste elementVO + Høyre piltast
Gå til neste overskriftVO + Command + H
Simuler klikkVO + Mellomrom
Stopp nåværende talebeskjedControl
Åpne rotorenVO + U

Hva du bør teste

Overskrifter og struktur

Åpne rotoren til VoiceOver ved å bruke VO + U. Naviger deg så mellom ulike typer elementer med piltastene og test at alle overskrifter og strukturelle elementer på siden blir lest opp.

Med denne rotoren åpen er det en ypperlig anledning for å sjekke

  • at overskriftsnivåer stemmer
  • at landemerkene har et logisk oppsett
  • at lenketekstene gir mening for seg selv

Test også å gå igjennom overskriftsnivåene med VO + Command + H og hør at denne reisen gir mening. Navigasjon via overskrifter på denne måten er en vanlig metode.

Skjema

Et skjema er satt sammen av mange elementer. Alle inndataelementer skal ha ledetekst. Test at det er en tydelig sammenheng mellom ledeteksten og skjemaelementet.

Test at alle knapper leses opp riktig.

Skjemavalidering

Ved validering i skjema skal bruker bli gjort oppmerksom på at feilmelding har dukket opp. Skjermleseren skal lese opp denne når den er synlig på skjermen. Test ved å fylle ut noe du vet gir feilmelding og trykk på "Send inn"-knappen eller en ekvivalens mens skjermleser er på.

Modaler

Test at skjermleser får med seg at det dukker opp en modal. Bruker skal ikke måtte gjette seg frem til at noe har tatt over fokus på skjermen.

Test at skjermleser leser opp elementene i modalen slik at det er tydelig hvordan man kommer seg ut.

Tekstbeskrivelse av bilder

Marker teksten rett før bildet for å bruke det som en snarvei slik at du kun trenger å bruke VO + Høyre piltast for å komme til neste element.

Usynlige elementer

Test at elementer som skal være skjulte også er skjult for skjermleser. Et eksempel kan være en modal som ligger gjemt.

Dekorativt innhold skal ikke leses opp av skjermleser.

Ikoner

Ikoner skal hvis mulig ha en alt-attributt, men noen ikoner blir satt i CSS slik som kulepunktene i Jøkuls liste med ikoner. Test at ikonet gir mening med skjermleser uavhengig av om det har en alt-tekst.

Lenker

Naviger deg mellom lenker med VO + Command + L (fremover) eller VO + Shift + Command + L (bakover).

Lister

Naviger deg mellom lister med VO + Command + X (fremover) eller VO + Shift + Command + X (bakover). Bruk deretter VO + Venstre/høyre piltast for å velge forrige/neste element.

Tabeller

WebAIM sin oversikt for tilgjengelige tabeller er anbefalt lesning. Det samme er Tables-delen av BBC News sin accessibility testing-dokumentasjon. Prøv deg gjerne fram med VoiceOver på eksempeltabellene til WebAIM om du ikke har gjort det før.

Alle tabeller må ha overskrifter for hver kolonne. Vi oppfordrer alle til å ha en caption som beskriver tabellen for skjermlesere, men som er skjult visuelt.

VoiceOver har noen ekstra snarveier for tabeller som gjør det lettere å navigere i rader og kolonner.

Tastatursnarveier for tabeller
FunksjonTaster
Gå til neste tabellVO + T
Gå til forrige tabellVO + Shift + T
Gå til neste celle i retningVO + Piltast
Les kolonneoverskriftVO + C
Les radoverskriftVO + R
Les hele radenVO + R, VO + R
Les hele kolonnenVO + C, VO + C

Tidsbegrensning

Hvis tjenesten har en tidsbegrensning, ofte som følge av at man blir automatisk logget ut etter et antall minutter så må det testes at skjermleser får med seg nedtellingen.