Tydelig fokus

Silktide tester at kontroller på siden din – lenker, knapper og skjemafelt – endrer utseende tydelig nok når de velges med tastaturet. Det er ikke nok at endringen bare finnes; den må være stor og ha høy kontrast nok til at den faktisk synes.

Dette er en strengere versjon av Synlig fokus: den kontrollen undersøker om det finnes en fokusindikator, mens denne måler om indikatoren er fremtredende nok.

Du kan prøve selv: last inn en side og trykk på Tab-tasten gjentatte ganger. Hver kontroll du lander på, skal endre utseende synlig, for eksempel ved å få en særpreget omrisslinje eller en bakgrunn med kontrast.

Hvorfor dette er viktig

Personer som navigerer med tastaturet – inkludert mange med motoriske funksjonsnedsettelser og brukere av bryterenheter – er avhengige av å se hvor er. En fokusindikator som teknisk sett er til stede, men som er svak, tynn eller har lav kontrast, er like ubrukelig som om det ikke fantes noen indikator i det hele tatt: Brukeren mister plassen sin på siden og kan ikke se hvilken kontroll Enter-tasten vil aktivere.

Slik løser du det

Den enkleste pålitelige løsningen er en heltrukken omrisslinje rundt kontrollen som har fokus, minst 2 piksler tykk, i en farge som har kontrast mot både kontrollen og omgivelsene.

En indikator med to farger garanterer synlighet uavhengig av bakgrunnen:


\/* En gjennomsiktig omrisslinje beholder en indikator i modus for tvungne farger *\/
:focus {
  outline: 2px solid transparent;
  \/* Lys glorie + mørk ring: én av de to har alltid kontrast *\/
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Denne tilnærmingen kommer fra WCAG-teknikk C40.

Unngå indikatorer langs én enkelt kant, for eksempel en nedre kantlinje: Om de er store nok, avhenger av lengden på kanten, som varierer for tekstlenker.

Slik tester Silktide dette

Simulerer en tastaturbruker som trykker Tab gjennom hvert fokuserbart element 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 for hvert element i fokusert og ufokusert tilstand.
Består elementer som beholder nettleserens standardfokusomriss, eller der bakgrunnsfargen endres med en kontrast på minst 3:1 mellom de to tilstandene.
Måler ellers omrisslinjene, kantlinjene og skyggene i begge tilstander, og teller området som endres med tilstrekkelig kontrast. For å bestå må dette området være minst like stort som en omkrets rundt elementet med en tykkelse på 2 piksler, i henhold til kravet i 2.4.13.

Feilsøking

Fokusstilen trenger JavaScript for å vises

Fokusstiler bør defineres utelukkende i . Hvis fokus brukes av – for eksempel ved at et skript legger til en klasse – kan det hende at Silktide ikke registrerer det, og at det ikke fungerer for hjelpemiddelteknologi uten et fysisk tastatur. Prøv å deaktivere JavaScript og gå gjennom siden med Tab-tasten for å bekrefte.

Fokusstiler vi ikke kan måle

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

Fokus som tegnes med pseudoelementer som ::before eller ::after.
Fokus som brukes 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 variasjoner.

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

Elementer over bilder eller med uforutsigbare bakgrunner

Kontrast beregnes mot en kjent bakgrunnsfarge. Når et element ligger over et bilde, eller er plassert utenfor det overordnede elementet slik at bakgrunnen ikke kan fastslås, hopper Silktide over det i stedet for å gjette.

Uventede elementer kan fokuseres

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