2-4-7
Custom component waarvan de focus is vergeten
Een zelfgebouwde tabcomponent. Mooie styling. Hover-effecten. Transities. Tab ernaartoe. Geen focusindicator. De developer heeft border: none en outline: none in de component-CSS gezet om de standaardstyling te verwijderen. En is vergeten een :focus-visible toe te voegen.
JavaScript dat de focus actief verwijdert
element.addEventListener("focus", function() { this.blur(); }); Een element krijgt focus. JavaScript verwijdert de focus direct. Het element heeft een fractie van een seconde focus gehad. De gebruiker merkt niets.
overflow: hidden knipt de focusindicator af
Een mooie kaartcomponent. Afgeronde hoeken. overflow: hidden om te voorkomen dat content buiten de hoeken valt.
Negatieve outline-offset die de focus verbergt
Een link met een donkere achtergrond. De focusindicator is er — een zwarte outline van 2 pixels. Maar outline-offset: -4px duwt die outline naar binnen. Onder de achtergrondkleur.
Focusindicator die opgaat in de achtergrond
Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.
outline: none, de meest destructieve regel in CSS
*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.
JavaScript dat de focus actief verwijdert
element.addEventListener("focus", function() { this.blur(); }); Een element krijgt focus. JavaScript verwijdert de focus direct. Het element heeft een fractie van een seconde focus gehad. De gebruiker merkt niets.
overflow: hidden knipt de focusindicator af
Een mooie kaartcomponent. Afgeronde hoeken. overflow: hidden om te voorkomen dat content buiten de hoeken valt.
Negatieve outline-offset die de focus verbergt
Een link met een donkere achtergrond. De focusindicator is er, een zwarte outline van 2 pixels. Maar outline-offset: -4px duwt die outline naar binnen. Onder de achtergrondkleur.
Focusindicator die opgaat in de achtergrond
Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.
outline: none, de meest destructieve regel in CSS
*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.
Hoe test ik focus zichtbaarheid
Navigeer je met de muis door een website, dan zie je welk element actief is doordat je muisaanwijzer erop staat. Maar voor mensen die het toetsenbord gebruiken, is er een ander visueel signaal nodig: de focusmarkering. Zonder die markering ben je verdwaald op de pagina. Je drukt op Tab, er gebeurt iets – maar je hebt geen idee waar je bent.