Synligt fokus

Silktide tester, at kontrolelementer på din side – links, knapper og formularfelter – synligt ændrer sig, når de vælges med tastaturet. Uden en synlig ændring kan tastaturbrugere ikke se, hvor de er på siden.

Du kan selv prøve det: Indlæs en side, og tryk gentagne gange på Tab-tasten. Hvert kontrolelement, du lander på, bør ændre udseende, for eksempel ved at få en omridslinje eller en anden baggrundsfarve.

Alle standardkontrolelementer i browsere viser fokus som standard, så en fejl her betyder næsten altid, at et typografiark har slået standardindikatoren fra, eller at et brugerdefineret kontrolelement er bygget uden en.

Hvorfor dette er vigtigt

Personer, der ikke kan bruge en mus, navigerer med Tab-tasten, og fokusindikatoren er deres eneste måde at vide, hvilket kontrolelement de er på. Når en designer fjerner den – ofte fordi standardomridslinjen blev anset for at være grim – bliver tastaturbrugere efterladt med at trykke på taster i blinde uden at vide, hvad et tryk på Enter vil aktivere.

Sådan løser du det

Find det sted, hvor din deaktiverer fokus, typisk en regel som outline: none eller outline: 0, og fjern den.
Hvis du erstatter standardomridslinjen, skal du angive et tydeligt alternativ for tilstanden :focus:

/* Gendanner en synlig indikator for fokuserede felter */
input:focus {
  outline: 2px solid #396196;
}

Giv brugerdefinerede kontrolelementer, såsom dine egne rullemenuer eller skydere, en eksplicit fokusstil – de har ingen som standard.

Se Tydeligt fokus, det strengere supplement til dette tjek, for at få vejledning om, hvor fremtrædende en indikator bør være.

Sådan tester Silktide dette

Simuler en tastaturbruger, der tabulerer gennem alle fokuserbare elementer på siden, mens elementer, du har udelukket fra kontrol, elementer skjult for seende brugere og elementer med en tabindex på -1 springes over.
Sammenlign hvert elements stile i fokuseret og ufokuseret tilstand.
Markér elementer, hvis udseende ikke ændrer sig på en måde, som en seende bruger kan skelne, når de får .

Fejlfinding

Fokusstilen kræver JavaScript for at blive vist

Fokusstile bør kun defineres i CSS. Hvis fokus anvendes af – for eksempel et script, der tilføjer en klasse – kan Silktide muligvis ikke registrere det, og det virker muligvis ikke for hjælpemiddelteknologier uden et fysisk tastatur. Prøv at deaktivere JavaScript og tabulere gennem siden for at bekræfte det.

Fokusstile, vi ikke kan måle

Nogle måder at implementere fokus på kan ikke registreres automatisk:

Fokus, der tegnes med pseudoelementer som ::before eller ::after.
Fokus, der anvendes via :focus-within på en beholder.
Fokusstile, der nedarves til underordnede elementer, såsom et <span> inde i et link. Nogle af disse tilfælde registreres, men ikke alle variationer.

Elementer, der bruger disse teknikker, springes over i stedet for at blive markeret.

Uventede elementer er fokuserbare

Tags som <div> eller <span> bliver fokuserbare, når de får en tabindex på 0 eller højere, hvilket er sådan, brugerdefinerede kontrolelementer understøtter brug af tastatur. Hvis et af dem vises i dine resultater, kan det faktisk nås med tastaturet og har brug for en fokusstil. Se tabindex på MDN.