Enkel testing med VoiceOver for iOS

Både iPhone, iPad og iPod har en innebygget skjermleser som heter VoiceOver. Med denne skjermleseren kan du teste nettsidene dine på en enkel måte. Fullgod testing bør gjøres av noen som faktisk må bruke VoiceOver og kan skjermleseren godt, men jeg anbefaler alle og kontrollere det de publiserer før «ekte brukertesting» eller «Ekspertevaluering».

Dette innlegget er kategorisert som MTBlogg (MTB). MTB-innleggene er Morten Tollefsens personlige synspunkter på ulike emner om web og universell utforming.
Permalenke: x.medialt.no/category/mtb

Skru på VoiceOver og tilgjengelighetssnarveien

VoiceOver installeres med operativsystemet, så alt du trenger å gjøre er å aktivere skjermleseren.

Velg: Innstillinger | Generelt | Tilgjengelighet | VoiceOver

Vis aktivere voiceover

Det finnes en del innstillinger for VoiceOver, men disse gjennomgås ikke i denne artikkelen. Det du må skjønne er at brukergrensesnittet endres, for eksempel fingerbevegelsene, når VoiceOver er på. Det kan derfor lønne seg å bruke tilgjengelighetssnarveien så du kjapt kan skru VoiceOver av eller på.

Vis tilgjengelighetssnarvei

Fingerbevegelser

Det aller enkleste du kan gjøre når VoiceOver er på er å peke på skjermen: da skal elementet leses opp. Hovedprinsippet er at du først setter fokus på et element, deretter aktiverer du elementet ved å dobbeltklikke med en finger (hvor som helst på skjermen). Sveip fra venstre mot høyre med en finger for å gå til neste element og fra høyre mot venstre for å gå til forrige.

Skal du teste litt ordentlig med VoiceOver bør du lære deg en del andre fingerbevegelser, kanskje til og med skru av skjermen – aktivere skjermteppe (trippelklikk med tre fingre).

Vis fingerbevegelser for voiceover

Sveip gjennom siden

VoiceOver fungerer best med Safari. Skal du sjekke en side kan du peke på adressefeltet og deretter sveipe med en finger fra venstre mot høyre. Gjør dette flere ganger og sjekk at alle elementer leses opp (bortsett fra ting du eventuelt har skjult bevisst, for eksempel grafisk pynt):

Kontroller at alt leses riktig, for eksempel at bilder har meningsfulle alternative tekster. Er rekkefølgen på elementene brukbar når du sveiper, eller kommer de i en ulogisk rekkefølge?

Er ting det de ser ut som?

Lenker kan stiles så de ser ut som knapper, eller knapper kan stiles så de ser ut som lenker. Vanligvis er det en fordel at skjermlesere tolker elementene slik de er ment å presenteres i det visuelle brukergrensesnittet. WAI-ARIA kan brukes for å gi beskjed om elementtype dersom det er nødvendig (role=»button», role=»link», …).

Bruk VoiceOver rotoren for å velge element. Sveip deretter opp/ned for å sjekke at VoiceOver stopper på de valgte elementene. Sjekk spesielt:

  • Overskrifter
  • Skjemakontroller
  • … og gjerne alt annet du har tid til.
Vis VoiceOver rotoren

Fungerer skjemakontroller slik de skal?

Sjekk følgende med VoiceOver på:

  • Kan knapper og andre elementer aktiveres med dobbeltklikk med en finger?
  • Kan glidebrytere, nedtrekkslister, spinnere osv. brukes?
  • Fungerer skriving i tekstfelt? Prøv også å slette tegn, navigere i tekstfeltet ved hjelp av rotoren, …

Kort sagt bør du sjekke alle skjemakontroller, og dette er spesielt viktig dersom du ikke bruker standard HTML. Brukes standard HTML skal ting funke, heldigvis.

Vær oppmerksom på hva som skjer hvis hamburger-menyer og andre responsive elementer utvides. Er det tydelig for VoiceOver at det er expandere? Hva skjer hvis du sveiper ut av det ekspanderte innholdet. Kan expanderne reduseres/krympes når VoiceOver er på, og er dette forståelig når du ikke ser på skjermen?