Tydligt fokus

Silktide testar att kontroller på din sida – länkar, knappar och formulärfält – ändrar sitt utseende tillräckligt tydligt när de väljs med tangentbordet. Det räcker inte att ändringen bara finns; den måste vara tillräckligt stor och ha tillräckligt hög kontrast för att faktiskt synas.

Det här är en striktare version av Synligt fokus: den kontrollen undersöker om det finns någon fokusindikator, medan den här mäter om indikatorn är tillräckligt framträdande.

Du kan prova själv: ladda en sida och tryck upprepade gånger på Tabb. Varje kontroll du hamnar på bör ändras synligt, till exempel genom att få en tydlig kontur eller en kontrasterande bakgrund.

Varför detta är viktigt

Personer som navigerar med tangentbord – däribland många med motoriska funktionsnedsättningar och användare av omkopplare – är beroende av att se var finns. En fokusindikator som tekniskt sett finns men är svag, tunn eller har låg kontrast är lika oanvändbar som ingen indikator alls: användaren tappar bort sig på sidan och kan inte se vilken kontroll som Enter-tangenten kommer att aktivera.

Så åtgärdar du det

Den enklaste tillförlitliga lösningen är en solid kontur runt den fokuserade kontrollen, minst 2 pixlar tjock, i en färg som kontrasterar mot både kontrollen och dess omgivning.

En indikator i två färger garanterar synlighet oavsett bakgrund:

/* En transparent kontur behåller en indikator i läget för framtvingade färger */
:focus {
  outline: 2px solid transparent;
  /* Ljus gloria + mörk ring: den ena kontrasterar alltid */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Den här metoden kommer från WCAG-tekniken C40.

Undvik indikatorer längs en enda kant, till exempel en underkant: om de är tillräckligt stora beror på längden på kanten, som varierar för textlänkar.

Så testar Silktide detta

Simulerar en tangentbordsanvändare som tabbar genom alla fokuserbara element på sidan och hoppar över element som du har undantagit från kontroller, element som är dolda för seende användare och element med ett tabindex på -1.
Jämför varje elements format i fokuserat och ofokuserat tillstånd.
Godkänner element som behåller webbläsarens standardkontur för fokus eller vars bakgrundsfärg ändras med en kontrast på minst 3:1 mellan de två tillstånden.
Mäter annars konturer, kanter och skuggor i båda tillstånden och räknar området som ändras med tillräcklig kontrast. För att godkännas måste området vara minst lika stort som en 2 pixlar tjock omkrets runt elementet, enligt kravet 2.4.13 i .

Felsökning

Fokusformatet behöver JavaScript för att visas

Fokusformat bör definieras enbart i . 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 inaktivera JavaScript och tabba genom sidan för att bekräfta.

Fokusformat som vi inte kan mäta

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

Fokus som ritas med pseudo-element som ::before eller ::after.
Fokus som tillämpas via :focus-within på en behållare.
Fokusformat 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 flaggas.

Element över bilder eller med oförutsägbara bakgrunder

Kontrasten beräknas mot en känd bakgrundsfärg. När ett element ligger över en bild eller är placerat utanför sitt överordnade element så att dess bakgrund inte kan fastställas, hoppar Silktide över det i stället för att gissa.

Oväntade element är fokuserbara

Taggar som <div> eller <span> blir fokuserbara när de får ett tabindex på 0 eller högre, vilket är hur anpassade kontroller får stöd för tangentbordsanvändning. Om ett sådant element visas i dina resultat är det verkligen nåbart med tangentbordet och behöver ett fokusformat. Se tabindex på MDN.