Synlig fokus

Silktide tester at kontroller på siden din – lenker, knapper og skjemafelt – endres synlig når de velges med tastaturet. Uten en synlig endring kan ikke tastaturbrukere se hvor på siden de befinner seg.

Du kan prøve selv: last inn en side og trykk på Tab-tasten flere ganger. Hver kontroll du flytter til, bør endre utseende, for eksempel ved å få en omriss eller en annen bakgrunnsfarge.

Alle standardkontroller i nettlesere viser fokus som standard, så en feil her betyr nesten alltid at et stilark har slått av standardindikatoren, eller at en tilpasset kontroll er bygget uten en slik indikator.

Hvorfor dette er viktig

Personer som ikke kan bruke mus, navigerer med Tab-tasten, og fokusindikatoren er den eneste måten de kan vite hvilken kontroll de er på. Når en designer fjerner den – ofte fordi standardomrisset ble ansett som stygt – blir tastaturbrukere sittende og trykke på taster i blinde, uten å vite hva Enter vil aktivere.

Slik løser du det

Finn hvor deaktiverer fokus, vanligvis en regel som outline: none eller outline: 0, og fjern den.
Hvis du erstatter standardomrisset, må du angi et tydelig alternativ for :focus-tilstanden:

/* Gjenoppretter en synlig indikator for felter med fokus */
input:focus {
  outline: 2px solid #396196;
}

Gi tilpassede kontroller, for eksempel egne rullegardinmenyer eller glidebrytere, en eksplisitt fokusstil – de har ingen standardstil.

Hvis du vil vite hvor fremtredende en indikator bør være, kan du se Tydelig fokus, den strengere ledsagende kontrollen til denne kontrollen.

Slik tester Silktide dette

Simulerer en tastaturbruker som tabber gjennom alle fokuserbare elementer på siden, og hopper over elementer du har utelatt fra kontrollen, elementer som er skjult for seende brukere, og elementer med en tabindex på -1.
Sammenligner stilene til hvert element i fokusert og ufokusert tilstand.
Flagge elementer der utseendet ikke endres på en måte som en seende bruker kan skille fra resten når de mottar .

Feilsøking

Fokusstilen trenger JavaScript for å vises

Fokusstiler bør defineres utelukkende i CSS. Hvis fokus angis med – for eksempel ved at et skript legger til en klasse – kan det hende at Silktide ikke oppdager det, og det kan hende at det ikke fungerer for hjelpemiddelteknologier uten et fysisk tastatur. Prøv å slå av JavaScript og tabbe gjennom siden for å bekrefte dette.

Fokusstiler vi ikke kan måle

Noen måter å implementere fokus på kan ikke oppdages automatisk:

Fokus som tegnes med pseudo-elementer som ::before eller ::after.
Fokus som angis via :focus-within på en beholder.
Fokusstiler som arves av underordnede elementer, for eksempel en <span> inne i en lenke. Noen av disse tilfellene oppdages, men ikke alle varianter.

Elementer som bruker disse teknikkene, hoppes over i stedet for å bli flagget.

Uventede elementer kan fokuseres

Tagger som <div> eller <span> blir fokuserbare når de får en tabindex på 0 eller høyere, noe som er måten tilpassede kontroller støtter tastaturbruk på. Hvis en slik tagg vises i resultatene dine, kan den faktisk nås med tastaturet og trenger en fokusstil. Se tabindex på MDN.