Hopp til innholdet
Et tastatur, illustrasjon.
Useit tester e-handel

1: Grensesnittet kan betjenes ved hjelp av tastaturet

Ingen av de gjennomgåtte e-handelsnettsidene oppfylte alle kravene knyttet til tastaturnavigering.

Hvorfor er dette viktig?

Det er viktig å tilrettelegge nettsiden for tastaturnavigasjon, spesielt for brukere som ikke har mulighet til å bruke en mus. Dette inkluderer personer med nedsatt motorisk funksjonsevne og de som er sterkt svaksynte som bruker skjermlesere.

For at tastaturnavigering skal fungere godt, må nettsiden ha:

  • en forutsigbar fokusrekkefølge
  • tydelig visuell fokusmarkering, slik at brukeren ser hvor de er
  • nyttige tastatursnarveier
Testede krav fra WCAG 2.1
  • 2.1.1 Keyboard (A)
  • 2.1.2 No Keyboard Trap (A)
  • 2.1.4. Character Key Shortcuts (A)
  • 2.4.3 Focus Order (A)
  • 2.4.7 Focus Visible (AA)

Resultater

5 % av nettsidene oppfyller kravene knyttet til tastaturnavigering19 ikke godkjente1 godkjente

Bare én av de 20 nettsidene vi analyserte, oppfylte kravene for tastaturnavigering. De gjenværende nettsidene hadde flere alvorlige feil, som inkluderte:

  • viktige funksjoner som ikke kunne nås ved bruk av tastatur
  • tastaturproblemer som førte til brukernes begrensende navigasjon
  • en uforutsigbar fokusrekkefølge
  • ingen fokusmarkering på interaktive elementer
  • det er mulig å navigere i bakgrunnen bak dekkende vinduer (som for eksempel informasjonsvinduer om informasjonskapsler)

5% godkjente

Eksempler på problemer

10 av nettsidene har tastaturfeller10 ikke godkjente10 godkjente

For brukere som navigerer på en nettside ved hjelp av tastaturet, er det essensielt at de enkelt kan få tilgang til innhold og funksjoner samtidig som de har muligheten til å forlate dem. En tastaturfelle oppstår når en funksjon er tilgjengelig, men brukeren ikke kan forlate den. Dette begrenser brukernes mulighet til å fortsette navigasjonen på nettsiden.

Under vår analyse identifiserte vi 10 nettsider som hadde tastaturfeller. Et konkret eksempel er søkefelt som kunne nås ved å bruke tab-tasten, men deretter viste seg å være umulig å forlate den, og dette begrenser deres evne til å fortsette navigasjonen på siden.

  • 2.1.2 No Keyboard Trap (A)
En nettside med fokus på ett søkefelt, illustrasjon.
11 av nettsidene har en ulogisk fokusrekkefølge11 ikke godkjente9 godkjente

Når brukeren trykker på tab-tasten, forventes det at fokuset beveger seg mellom de interaktive elementene i en logisk rekkefølge, noe som letter navigasjonen.

Vi har oppdaget flere problemer på mange nettsider knyttet til dette. Et gjentakende problem var muligheten til å forlate modale vinduer og få tilgang til innhold bak vinduet, eller at fokus ikke ble flyttet til nye områder som ble åpnet.

  • 2.4.3 Focus Order (A)
En nettside med tydelig nummerering som viser rekkefølgen for tastaturfokus, illustrasjon.
12 av nettsidene skjuler fokusmarkeringen for enkelte elementer11 ikke godkjente8 godkjente

Alle knapper, lenker og interaktive elementer som mottar tastaturfokus, må ha en tydelig visuell markering, for eksempel en farget ramme eller en understrek. Å fjerne denne markeringen tilsvarer å skjule musepekeren for de som navigerer med mus, og det gjør det praktisk talt umulig å navigere seg på siden.

Vår gjennomgang av nettsidene avslørte at mer enn halvparten av dem manglet en synlig fokusmarkering.

  • 2.4.7 Focus Visible (AA)
En nettside der et objekt har blitt tildelt en tydelig synlig fokusmarkering, illustrasjon.
14 av nettsidene mangler umiddelbart fokus på dialogvinduer14 ikke godkjente6 godkjente

Når en bruker navigerer med tab-tasten for å navigere seg rundt på en nettside, er det viktig at fokuset umiddelbart rettes mot dialogvinduet når det åpnes. Dette er spesielt viktig i situasjoner som for eksempel innlogging, hvor et dialogvindu vises på skjermen og resten av bakgrunnsinnholdet blir tonet ned.

I vår undersøkelse var det 14 av nettsidene som manglet dette. Dette kan risikere at tastaturbrukere må gjennomgå flere navigasjonssteg før de når innholdet i selve dialogvinduet.

  • 2.4.3 Focus Order (A)
En dialogboks med innloggingsmuligheter.
16 av nettsidene har ingen lenke som hopper over navigasjonen16 ikke godkjente4 godkjente

Når en bruker navigerer med tab-tasten, er det hensiktsmessig å tilby en lenke lenke som kan hoppe over navigasjonene. Dette er for å slippe unødig mange tastetrykk når de navigerer på siden. Denne lenken, som gir brukerne mulighet til å hoppe over navigasjonen, bør være skjult inntil den får fokus, og først da vises visuelt.

Spesielt for e-handelsnettsider med mange undersider, er det unødvendig for tastaturbrukere å gjennomgå navigasjonene hver gang de utforsker nettsiden.

I vår undersøkelse var det 16 av nettsidene som manglet en slik lenke for å hoppe over navigasjonen.

  • 2.4.1 Bypass Blocks (A)
En lenke som sier "Hopp til innholdet" som får en visuell fokusmarkering når man tab-taster til den.

Vil du vite statusen for universell utforming for din app eller nettside?

Ta kontakt med oss, så avtaler vi et uforpliktende møte og gjennomfører en live-gjennomgang.