Zichtbare focus

Silktide controleert of bedieningselementen op je pagina - links, knoppen en formuliervelden - zichtbaar veranderen wanneer ze met het toetsenbord worden geselecteerd. Zonder een zichtbare verandering kunnen toetsenbordgebruikers niet zien waar ze zich op de pagina bevinden.

Je kunt dit zelf proberen: laad een pagina en druk herhaaldelijk op de Tab-toets. Elk bedieningselement waarop je terechtkomt, moet van uiterlijk veranderen, bijvoorbeeld door een omlijning of een andere achtergrondkleur te krijgen.

Elk standaardbedieningselement van een browser geeft standaard de focus weer, dus een fout hier betekent vrijwel altijd dat een stylesheet de standaardindicator heeft uitgeschakeld of dat een aangepast bedieningselement zonder indicator is gebouwd.

Waarom dit belangrijk is

Mensen die geen muis kunnen gebruiken, navigeren met de Tab-toets. De focusindicator is hun enige manier om te weten op welk bedieningselement ze zich bevinden. Wanneer een ontwerper deze verwijdert - vaak omdat de standaardomlijning lelijk werd gevonden - moeten toetsenbordgebruikers blind toetsen indrukken, zonder te weten wat er gebeurt als ze op Enter drukken.

Hoe je dit oplost

Zoek waar je de focus uitschakelt, meestal een regel zoals outline: none of outline: 0, en verwijder deze.
Als je de standaardomlijning vervangt, zorg dan voor een duidelijk alternatief in de status :focus:

\/* Herstelt een zichtbare indicator voor velden met focus *\/
input:focus {
  outline: 2px solid #396196;
}

Geef aangepaste bedieningselementen, zoals je eigen vervolgkeuzemenu's of schuifregelaars, een expliciete focusstijl - deze hebben geen standaardstijl.

Zie Duidelijke focus, de strengere aanvullende controle, voor informatie over hoe opvallend een indicator moet zijn.

Hoe Silktide dit controleert

Simuleer een toetsenbordgebruiker die met Tab door elk focusbaar element op de pagina navigeert. Sla elementen over die je hebt uitgesloten van controles, elementen die verborgen zijn voor ziende gebruikers en elementen met een tabindex van -1.
Vergelijk de stijlen van elk element in de gefocuste en niet-gefocuste status.
Markeer elementen waarvan het uiterlijk op geen enkele manier verandert die een ziende gebruiker kan onderscheiden wanneer ze krijgen.

Problemen oplossen

Voor de focusstijl is JavaScript nodig

Focusstijlen moeten uitsluitend in CSS worden gedefinieerd. Als focus wordt toegepast door - bijvoorbeeld door een script dat een klasse toevoegt - kan Silktide dit mogelijk niet waarnemen en werkt het mogelijk niet voor ondersteunende technologie zonder fysiek toetsenbord. Probeer JavaScript uit te schakelen en met Tab door de pagina te navigeren om dit te controleren.

Focusstijlen die we niet kunnen meten

Sommige manieren om focus te implementeren kunnen niet automatisch worden gedetecteerd:

Focus die wordt getekend met pseudo-elementen zoals ::before of ::after.
Focus die via :focus-within op een container wordt toegepast.
Focusstijlen die doorcascaderen naar onderliggende elementen, zoals een <span> in een link. Sommige van deze gevallen worden gedetecteerd, maar niet alle varianten.

Elementen die deze technieken gebruiken, worden overgeslagen in plaats van gemarkeerd.

Onverwachte elementen zijn focusbaar

Tags zoals <div> of <span> worden focusbaar wanneer ze een tabindex van 0 of hoger krijgen. Zo ondersteunen aangepaste bedieningselementen toetsenbordgebruik. Als er een in je resultaten verschijnt, is het daadwerkelijk bereikbaar met het toetsenbord en heeft het een focusstijl nodig. Zie tabindex op MDN.