Synligt fokus

Silktide testar att kontroller på sidan – länkar, knappar och formulärfält – ändras visuellt när de väljs med tangentbordet. Utan en synlig förändring kan tangentbordsanvändare inte se var på sidan de befinner sig.

Du kan prova själv: öppna en sida och tryck upprepade gånger på Tabb-tangenten. Varje kontroll som du hamnar på ska ändra utseende, till exempel genom att få en kontur eller en annan bakgrundsfärg.

Alla standardkontroller i webbläsare visar fokus som standard, så ett fel här innebär nästan alltid att en stilmall har stängt av standardindikatorn eller att en anpassad kontroll har byggts utan en sådan.

Varför detta är viktigt

Personer som inte kan använda en mus navigerar med Tabb-tangenten, och fokusindikatorn är deras enda sätt att veta vilken kontroll de befinner sig på. När en designer tar bort den – ofta för att standardkonturen ansågs ful – lämnas tangentbordsanvändare åt att trycka på tangenter i blindo, utan att veta vad ett tryck på Enter kommer att aktivera.

Så åtgärdar du det

Leta reda på var din inaktiverar fokus, vanligtvis en regel som outline: none eller outline: 0, och ta bort den.
Om du ersätter standardkonturen ska du ange ett tydligt alternativ för tillståndet :focus:

\/* Återställer en synlig indikator för fält med fokus *\/
input:focus {
  outline: 2px solid #396196;
}

Ge anpassade kontroller, till exempel dina egna rullgardinsmenyer eller reglage, en uttrycklig fokusstil – de har ingen standardstil.

Information om hur framträdande en indikator bör vara finns i Tydligt fokus, den striktare kompletterande kontrollen.

Så testar Silktide detta

Simulerar en tangentbordsanvändare som tabbar genom varje fokuserbart element på sidan och hoppar över element som du har undantagit från kontrollen, element som är dolda för seende användare samt element med ett tabindex på -1.
Jämför varje elements stilar i dess fokuserade och ofokuserade tillstånd.
Markerar element vars utseende inte ändras på något sätt som en seende användare kan urskilja när de får .

Felsökning

Fokusstilen kräver JavaScript för att visas

Fokusstilar bör definieras enbart i CSS. Om fokus tillämpas av – till exempel genom att ett skript lägger till en klass – kanske Silktide inte upptäcker det, och det kanske inte fungerar för hjälpmedel utan ett fysiskt tangentbord. Försök att inaktivera JavaScript och tabba genom sidan för att bekräfta.

Fokusstilar som vi inte kan mäta

Vissa sätt att implementera fokus kan inte upptäckas automatiskt:

Fokus som ritas med pseudo-element som ::before eller ::after.
Fokus som tillämpas via :focus-within på en behållare.
Fokusstilar som ärvs av underordnade element, till exempel ett <span> inuti en länk. Vissa av dessa fall upptäcks, men inte alla varianter.

Element som använder dessa tekniker hoppas över i stället för att markeras.

Oväntade element kan fokuseras

Taggar som <div> eller <span> blir fokuserbara när de får ett tabindex på 0 eller högre, vilket är så anpassade kontroller kan användas med tangentbord. Om ett sådant element visas i dina resultat är det faktiskt nåbart med tangentbord och behöver en fokusstil. Se tabindex på MDN.