Tydelig fokus

Silktide tester, at kontrolelementer på din side – links, knapper og formularfelter – ændrer deres udseende tydeligt nok, når de vælges med tastaturet. Det er ikke nok, at ændringen blot findes; den skal være stor nok og have tilstrækkelig høj kontrast til faktisk at kunne ses.

Dette er en strengere version af Synlig fokus: det tjek undersøger, om der findes en fokusindikator, mens dette måler, om indikatoren er fremtrædende nok.

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 sig synligt, for eksempel ved at få en tydelig omridslinje eller en baggrund med kontrast.

Hvorfor det er vigtigt

Personer, der navigerer med tastaturet – herunder mange med motoriske funktionsnedsættelser og brugere af kontaktstyringsenheder – er afhængige af at kunne se, hvor er. En fokusindikator, der er teknisk til stede, men svag, tynd eller har lav kontrast, er lige så ubrugelig som slet ingen indikator: Brugeren mister sin placering på siden og kan ikke se, hvilket kontrolelement et tryk på Enter aktiverer.

Sådan løser du det

Den enkleste pålidelige løsning er en ubrudt omridslinje omkring det fokuserede kontrolelement, mindst 2 pixel tyk, i en farve, der står i kontrast til både kontrolelementet og dets omgivelser.

En indikator med to farver garanterer synlighed uanset baggrunden:

/* En gennemsigtig omridslinje bevarer en indikator i forced-colors-tilstand */
:focus {
  outline: 2px solid transparent;
  /* Lys glorie + mørk ring: én af de to har altid kontrast */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Denne tilgang kommer fra WCAG-teknik C40.

Undgå indikatorer langs én enkelt kant, såsom en bundkant: Om de er store nok, afhænger af længden på den kant, som varierer for tekstlinks.

Sådan tester Silktide dette

Simuler en tastaturbruger, der tabulerer gennem hvert fokuserbart element på siden, og spring over elementer, du har udelukket fra tjek, elementer, der er skjult for seende brugere, og elementer med en tabindex på -1.
Sammenlign hvert elements typografier i dets fokuserede og ufokuserede tilstande.
Godkend elementer, der bevarer browserens standardomridslinje for fokus, eller hvis baggrundsfarve ændres med en kontrast på mindst 3:1 mellem de to tilstande.
Mål ellers omridslinjerne, kanterne og skyggerne i begge tilstande, og beregn det areal, der ændres med tilstrækkelig kontrast. For at bestå skal dette areal være mindst lige så stort som en 2 pixel tyk omkreds omkring elementet, i henhold til kravet i 2.4.13.

Fejlfinding

Fokusstilen kræver JavaScript for at vises

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

Fokusstile, vi ikke kan måle

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

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

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

Elementer over billeder eller med uforudsigelige baggrunde

Kontrast beregnes i forhold til en kendt baggrundsfarve. Når et element ligger over et billede eller er placeret uden for sit overordnede element, så dets baggrund ikke kan bestemmes, springer Silktide det over i stedet for at gætte.

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.