Duidelijke focus

Silktide controleert of besturingselementen op je pagina - links, knoppen en formuliervelden - duidelijk genoeg van uiterlijk veranderen wanneer ze met het toetsenbord worden geselecteerd. Het is niet voldoende dat de verandering alleen bestaat; deze moet groot genoeg zijn en voldoende contrast hebben om daadwerkelijk zichtbaar te zijn.

Dit is een strengere versie van Zichtbare focus: die controle vraagt of er überhaupt een focusindicator aanwezig is, terwijl deze controle meet of de indicator voldoende opvalt.

Je kunt dit zelf proberen: laad een pagina en druk herhaaldelijk op de Tab-toets. Elk besturingselement waarop je terechtkomt, moet zichtbaar veranderen, bijvoorbeeld door een duidelijke omtrek of een contrasterende achtergrond te krijgen.

Waarom dit belangrijk is

Mensen die met het toetsenbord navigeren - onder wie veel mensen met motorische beperkingen en gebruikers van schakelapparaten - zijn afhankelijk van het zien waar de zich bevindt. Een focusindicator die technisch aanwezig is maar vaag, dun of weinig contrastrijk is, is net zo nutteloos als helemaal geen indicator: de gebruiker raakt zijn positie op de pagina kwijt en kan niet zien welk besturingselement wordt geactiveerd door op Enter te drukken.

Zo los je dit op

De eenvoudigste betrouwbare oplossing is een doorlopende omtrek rond het besturingselement met focus, van minimaal 2 pixels dik, in een kleur die contrasteert met zowel het besturingselement als de omgeving.

Een indicator in twee kleuren garandeert zichtbaarheid, ongeacht de achtergrond:

\/\* Een transparante omtrek houdt een indicator zichtbaar in de modus voor geforceerde kleuren *\/
:focus {
  outline: 2px solid transparent;
  \/\* Lichte halo + donkere ring: een van de twee contrasteert altijd *\/
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Deze aanpak komt uit WCAG-techniek C40.

Vermijd indicatoren langs slechts één rand, zoals een onderrand: of ze groot genoeg zijn, hangt af van de lengte van die rand, die varieert bij tekstlinks.

Zo test Silktide dit

Simuleer een toetsenbordgebruiker die met Tab door elk focusbaar element op de pagina navigeert, waarbij elementen die je hebt uitgesloten van controles, elementen die voor ziende gebruikers verborgen zijn en elementen met een tabindex van -1 worden overgeslagen.
Vergelijk de stijlen van elk element in de gefocuste en ongefocuste toestand.
Keur elementen goed die de standaardfocusomtrek van de browser behouden, of waarvan de achtergrondkleur verandert met een contrast van ten minste 3:1 tussen de twee toestanden.
Meet anders de omtrekken, randen en schaduwen van beide toestanden en tel het oppervlak dat met voldoende contrast verandert. Om te slagen, moet dat oppervlak minstens zo groot zijn als een omtrek van 2 pixels dik rond het element, volgens de vereiste van 2.4.13.

Problemen oplossen

Voor de focusstijl is JavaScript nodig

Focusstijlen moeten uitsluitend in worden gedefinieerd. Als focus wordt toegepast door - bijvoorbeeld door een script dat een klasse toevoegt - merkt Silktide dit mogelijk niet op en werkt het mogelijk niet voor hulptechnologieën zonder fysiek toetsenbord. Probeer JavaScript uit te schakelen en met Tab door de pagina te navigeren om dit te bevestigen.

Focusstijlen die we niet kunnen meten

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

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

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

Elementen boven afbeeldingen of met onvoorspelbare achtergronden

Contrast wordt berekend ten opzichte van een bekende achtergrondkleur. Wanneer een element boven een afbeelding staat of buiten zijn parent is geplaatst, waardoor de achtergrond niet kan worden bepaald, slaat Silktide het over in plaats van te gokken.

Onverwachte elementen zijn focusbaar

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