Synshemmet bruker med mørke briller, illustrasjon.

Useit tester e-handel

2: Skjermlesere presenterer grensesnittet på en nyttig måte

Ingen av de undersøkte e-handelsnettsidene klarte kravene som er koblet opp til skjermlesernavigering.

Hvorfor er dette viktig?

En skjermleser er et hjelpemiddel for personer som er sterkt svaksynte, og konverterer det som vises på skjermen til syntetisk tale eller punktskrift. Disse brukerne kan styre grensesnittet ved hjelp av tastaturkommandoer eller berøringsbevegelser på en berøringsskjerm.

For at skjermlesere skal fungere optimalt, må nettsider og apper være utformet med universell utforming i tankene. Dette innebærer:

å gi bilder beskrivende tekstalternativer til bilder
å organisere informasjonen i en logisk rekkefølge
å sikre at knapper og andre interaktive elementer er kodet korrekt

Testede krav fra WCAG 2.1

1.1.1 Non-text Content (A)
1.3.1 Info and Relationships (A)
1.3.2 Meaningful Sequence (A)
4.1.2 Name, Role, Value (A)

Resultater

0 % av nettsidene oppfyller kravene knyttet til skjermlesere20 ikke godkjente0 godkjente

Samtlige av de undersøkte nettsidene har alvorlige mangler når det gjelder universell utforming for skjermlesere. Dette gjør det vanskelig, og i noen tilfeller umulig, for kunder som bruker skjermlesere å handle på nettet.

Semantisk koding

Mange av nettsidene er ikke bygget med riktig type koding, også kjent som semantisk korrekt koding. Dette fører til at skjermleseren ikke kan formidle informasjon til brukerne om hva slags innhold det er og hvilken type funksjonalitet som er tilgjengelig.

WAI-ARIA

Det finnes kode som kalles ARIA-attributter, som har til hensikt å lette universell utforming for skjermleserbrukere. Riktig bruk av ARIA kan gi informasjon om funksjonalitet og struktur, men det er lett å gjøre feil. Dessverre ser vi at ARIA-attributter noen ganger brukes feil, noe som bare kompliserer situasjonen ytterligere.

Dette indikerer at utviklere kanskje ikke fullt ut forstår hva som kreves for å oppnå universell utforming i kodingen og betydningen av de ulike elementene. Det viser også behovet for at utviklere må øke sin kunnskap om testing av løsningene sine med skjermlesere.

Eksempler på problemer

Alle nettsidene mangler alternative tekster for bilder20 ikke godkjente0 godkjente

Alternative tekster for bilder, også kalt alt-tekst, er ofte en utfordring for brukere med skjermlesere. Gjennom undersøkelsen ble det avdekket at alternative tekster i de fleste tilfeller enten var mangelfulle eller ikke eksisterende.

Mange av nettsidene har flere ulike problemer med alternative tekster. Manglene kan inkludere:

bilder som helt mangler alternative tekster
tomme alternative tekster for informasjonsbærende bilder
uforståelige alternative tekster
misvisende alternative tekster som heller beskriver bildets motiv enn å formidle hva bildet skal representere i sin sammenheng

1.1.1 Non-text Content (A)

To bilder med synlige alt-tekster for å selge solbriller, der den ene ikke beskriver produktet i sin sammenheng, illustrasjon.

19 av nettsidene har mangler når det gjelder navn, rolle og verdi for interaktive objekter19 ikke godkjente1 godkjente

Det er viktig at elementer og innhold på nettsiden har angitt funksjonalitet, navn og rolle. Under undersøkelsen oppdaget vi at femten av nettsidene bruker en generisk HTML blokk-element kalt div.

Ofte brukes vanlige <div>-elementer for å lage knapper og andre interaktive objekter. Et <div>-element mangler innebygd funksjonalitet (semantisk rolle) og vil derfor ikke kunne presenteres på riktig måte for brukere som ikke ser.

Interaktive elementer manglet ofte også et forståelig navn i koden. Dette betyr at sterkt synshemmede brukere med skjermlesere ikke får høre at knappen er en knapp, og heller ikke hva den er til for.

4.1.2 Name, Role, Value (A)

Menyknapp med navn, rolle og beskrevet verdi, illustrasjon.

19 av nettsidene følger ikke en logisk overskriftsstruktur17 ikke godkjente1 godkjente

H-tags brukes til å kode overskrifter, og det er essensielt at overskriftsstrukturen samsvarer med den visuelle presentasjonen, altså en hierarkisk rekkefølge fra h1 til h6. Dette sikrer en logisk opplesning for skjermleserbrukere.

For å oppnå universell utforming og god brukeropplevelse, er det viktig å opprettholde konsistens mellom visuell og strukturell presentasjon av overskrifter.

1.1.1 Non-text Content (A)

Overskrifter som følger en hierarkisk rekkefølge, illustrasjon.

11 av nettsidene har utvidbare/minimerte områder som ikke blir opplest for skjermlesere11 ikke godkjente9 godkjente

Knapper som utvider eller minimerer informasjon må gjengis for skjermlesere. Aria-expanded er et attributt som brukes, dette gir informasjon om knappens status, enten den utvider eller minimerer informasjon.

11 av nettsidene mangler å informere skjermleserbrukere om dette.