2-4-7
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.
SC 2.4.7 - Wat betekent \"Focus zichtbaar\"
Stel je voor dat je een formulier invult met je muis, maar de cursor is onzichtbaar. Je klikt ergens en hoopt dat je het juiste veld raakt. Dat klinkt absurd, maar precies dat is wat er gebeurt als een website geen zichtbare focus-indicator heeft voor toetsenbordgebruikers.