Hopp til hovedinnhold

Å kjøpe påskelam som skjermleserbruker

Stian Snoen

Jeg fikk ideen til denne korte undersøkelsen i forkant av påsken. Som Inklud sin blinde brukerekspert har jeg sett på hvor enkelt eller vanskelig det er å navigere, søke, finne og legge påskelammet i handlekurven. De to nettsidene i utvalget er Annies pølsemakeri og Strøm-larsen.

Hva bør forbedres?

  1. Elementer skal ha korrekt tastaturfokus, endring av personverninnstillinger ligger visuelt i bunnen av siden, med tastatur ligger den på toppen av nettsiden. Dette bør endres ved å fjerne tab-index på knappen for justering av personverninnstillinger. 
  2. Gjør det enklere for brukerne å navigere seg til produktsiden, på produktsiden bør man sortere produktene i en ordnet alfabetisk liste eller en uordnet liste med flest til færrest produkttreff. Gi brukerne informasjon om hvordan produktlisten er sortert slik at hen får mulighet til å oppfatte innholdet på en god måte. 
  3. Presenter pris på en robust måte slik at alle kan forstå hva prisen er for produktet, det skal være mulig å sammenlikne produktene ut fra produktsiden og ikke at man må gå inn på hvert produkt for å finne prisinformasjon. 
  4. Når innhold endrer seg, slik som å legge en vare i handlekurven skal dette dynamisk annonseres til skjermlesere gjennom opplesing av at 1 vare ble lagt i handlekurven. Hvis man trenger å gjøre valg før man legger varen i handlekurven må dette merkes på en tydelig og robust måte slik at brukern forstår dette. 

Test av Annies pølsemakeri

Det første man ser når man har kommet seg gjennom personverninnstillingene, er at justering av personverninnstillinger/cookies er det første elementet man når ved hjelp av tastatur. Denne knappen når man først fordi det er satt en positiv tab-index på denne knappen. Dette er en utfordring som går igjen ved knapper for personverninnstillinger og som man bør være oppmerksom på. Vi hos Inklud bistår gjerne med vår kompetanse for å kunne utbedre slike repiterende feil vi ofte ser på nettsider, apper og dokumenter. 

Den neste utfordringen er manglende landemerker, det er ikke definert noe landemerke for toppområde/banner og ikke noe landemerke for hovedområde/main. Dette gjør det vanskelig både for Google og andre søkemotorer samt alle som benytter hjelpeteknologi å kunne oppfatte innholdet på nettsiden. Dette er et forbedringspunkt vi har sett hos mange andre selskaper. 

Vi skal nå se videre på hvor enkelt eller utfordrende det er å finne påskelammet. Det må sies at det er meget utfordrende å finne produktinformasjonen hos Annies, her må man først gå inn på et produkt på forsiden (i dette tilfelle lammeskank), for deretter å trykke på produkter. 

Voiceover med fokus på "Produkter" i brødsmulesti på lammeskank siden

Når man kommer inn på produktsiden og skal finne informasjon om lam, er det meget forvirrende å lete i produktlisten. Denne listen ser ut som en liste, den smaker som en liste men er ikke kodet som en liste. Dette fører til at man med skjermleser må gjette seg frem til at kjøtt har en underkategori. Her har man benyttet HTML-komponenten div i stedet for Button. Dette fører til at når man trykker tab får man først høre «+ minimert oversikt» hva som er minimert vites ikke ved testing i Safari.

VoiceOver med fokus på "Kjøtt" i navigasjonsmeny, kun "+, minimert oversikt" annonseres"

Vi finner nå produktkategorien lam og produktet lammebog. Det viser seg nå meget utfordrende å vite prisen på produktet da dette presenteres på en meget interesant måte hos Annies. Skjermleseren leser følgende «price range 453 kr through 648 kr vis», dette gir meget lite mening om prisen for produktet.

Det siste vi skal se på hos Annies er å legge en vare i handlekurven, her heter knappen «kjøp» det burde vært henvist til overskriften slik at man med skjermleser får vite hva man legger i handlekurven. Det må også gjøres noen valg knyttet til antall og størrelse, noe det ikke er gitt informasjon om til brukeren. 

Voiceover med foksu på kjøp knapp, visuelt er denne knappen nedtonet men det kommuniseres ikke til voiceover. "Kjøp, knapp" annosneres

Man får heller ikke annonsert dynamisk at man legger en vare i handlekurven med skjermleser. Skjermlesere skal fortelle at nå skjedde det en handling. 

Test av Strøm-larsen

På forsiden til Strøm-larsen ser man den samme utfordringen knyttet til positiv tab-index på knappen for endring av personverninnstillinger. Dette kan skyldes at man benytter samme leverandør for personverninnstillinger, dette må man se mer på ved en senere anledning.

På nettsiden til Strøm-larsen har de benyttet landemerker slik at det er enklere å navigere seg på siden med skjermleser, nettsiden mangler en hovedoverskrift og dette burde vært lagt inn for å fortelle brukere at de er på nettsiden til Strøm-larsen. For å navigere seg til produktoversikten må man gjette seg frem til at nettbutikken er det valget man skal gjøre for å komme seg til produktoversikt. Dette kan være meget forvirrende for en del brukere av nettsiden deres. 

Voiceover med fokus på nettbutikk-lenke på Strøm Larsen forsidenNår du har kommet inn på produktoversikten er det meget forvirrende å vite hvor man finner lam, man får høre «lam 34» med skjermleser. Her må hen gjette seg frem til at 34 er antall produkter i kategorien.

Vioceover med fokus på lam med tekst (34) bak seg, over er det et bilde av surrede lammelår med fersk rosmarin

En annen utfordring på produktsiden er at alt-teksten for bilder er lik for alle bildene. På alle bildene får man med noen få unntak høre «Andebryst Holte gård 350 gram» med skjermleser. 

VoiceOver med fokus på et bilde av lammelår, alt-tekst sier dette er andebryst fra hote gård

Den siste utfordringen er knyttet til å legge varen i handlekurven, når man har gått inn på lammebog og skal legge varen i handlekurven får man kun høre legg til med skjermleser. Man får ikke konteksten av innholdet presentert og det blir ikke annonsert til skjermleser at man legger varen i handlekurven.

VoiceOver med fokus på legg til knapp for kjøp av lammebog, etter å ha klikket på knappen vises visuelt "Vis handlekurv" men skjermleseren får ingen beskjed om at noe har skjedd

Fakta om testingen

Denne testingen er gjort mot suksesskriteriene i standarden WCAG versjon 2.1 på nivå A og AA samt beste praksis, det er benyttet følgende testverktøy. 

  • Mac og Safari med VoiceOver for manuell testing
  • Mac og Chrome med Axe DevTools for manuell testing
  • iPhone med Safari og VoiceOver

Dato for testing er 28.03.2026, utført av Stian Snoen fra Inklud AS.

Matbestilling for alle?

På artikkelsiden til oss hos Inklud finner du innholdet knyttet til forskningsprosjektet om Matbestilling for alle hvor vi gjennom spørreundersøkelse, ekspertevaluering og brukertesting testet de tre mest benyttede tjenestene for hjemlevering av dagligvarer. Funnene fra dette prosjektet er også aktuelt for nettsider som selger påskelam.