spring naar de tekst

Pseudo selector :focus-within

:focus-within is een ietwat vreemde css pseudo selector. Vreemd omdat je met deze selector een parent element kan selecteren gebaseerd op de staat waarin een child element zich bevind. Er zijn een paar usecases te vinden voor deze selector maar ik gebruik hem vooral om de accessibility van een dropdownmenu te verbeteren. De meeste bezoekers navigeren een site met de muis maar er zijn ook veel mensen die geen muis kunnen of willen gebruiken. Die gebruiken bijvoorbeeld een screenreader of het toetsenbord. Met de tabtoets kun je naar elk interactief element navigeren. Denk dan aan links, buttons, formulieren, velden van formulieren, dropdowns enzovoort. Maar hoe weet je waar je bent op de pagina? Dit wordt geregeld door de :focus selector, een kader om een element heen. Standaard is deze blauw en altijd aanwezig bij een interactief element.

blauwe focus kader van een elementVaak wordt de focus weggehaald omdat designers het lelijk vinden. Weghalen is geen goed idee (vanwege de eerder genoemde accessibility) maar je kunt hem met :focus wel anders stijlen natuurlijk. Ook dit kan echter verwarrend zijn voor mensen die altijd met een toetsenbord navigeren. Maar goed daar hebben we het nu niet over. We hebben het over :focus-within. Stel we hebben een dropdownmenu.

blauwe focus kader van een elementDit is meestal een unodered list met in 1 van de listitems een tweede (hidden) unordered list. Door met de muis over het juiste listitems te hooveren wordt het submenu zichtbaar. Maar hoe bereik je de items in de dropdown als je geen muis gebruikt? Dan gebruik je tab. Met tab kan je alle menu-items bereiken. Alleen kent de tab toets geen hover functie, dus met tab wordt de dropdown niet zichtbaar. Je loopt wel door alle menu-items heen maar je ziet niet wat je doet, het menu zakt niet. Met :focu-within kun je CSS schrijven waardoor het dropdownmenu wel zichtbaar wordt als je met tab de bovenste menu link selecteerd, als er focus is op de bovenste link. Standaard is het dropdown verborgen met display: none. Middels de :hover pseudo selector zet je dit op display: block. Dat doe je nu dus ook met de :focus-within. Gepubliceerd op 16 augustus 2019 door Renee de Kruijf