focusbeheer

Focusbeheer verwijst naar het controleren van welke elementen op een pagina de toetsenbordfocus hebben en hoe de focus zich door de interface verplaatst. Het is essentieel voor gebruikers die uitsluitend via het toetsenbord navigeren en voor assistive technologies zoals schermlezers. Een goed uitgevoerde focusbeheer zorgt voor voorspelbare navigatie, betere toegankelijkheid en een consistente gebruikerservaring, in lijn met richtlijnen zoals WCAG.

Belangrijke concepten zijn onder meer: de focus is het element waarop de gebruiker actief reageert; focusbare elementen zijn knoppen, links, invoervelden en widgets; de focusvolgorde is de volgorde waarin met de Tab-toets wordt genavigeerd; een focustrap houdt de focus binnen een beperkt gebied (bijvoorbeeld een dialoog) totdat dit gebied wordt gesloten; focusherstel zet de focus terug naar het element dat de gebruiker activeerde voordat een dialoog werd geopend. Een duidelijke focusindicator is cruciaal.

Toepassingen en technieken: bij modale vensters, dropdowns en dynamische content is correcte focusbeheer cruciaal. Technieken omvatten het gebruik van tabindex om elementen in of buiten de tabvolgorde te plaatsen, en het aanroepen van element.focus() om de focus te verplaatsen. ARIA-rollen zoals role="dialog" en aria-modal="true" verbeteren de semantiek; aria-labelledby en aria-describedby leveren een duidelijke beschrijving.

Visueel en interactief: zorg voor een duidelijke focusindicator, bij voorkeur met CSS :focus-visible zodat toetsenbordgebruikers worden benadrukt terwijl muisgebruikers niet worden gestoord. Sluitacties zoals Escape moeten logisch zijn en focus moet terugkeren naar het eerder gebruikte element na sluiten van een dialoog of bericht. Vermijd onverwachte focusverschuivingen bij dynamische updates.

Zie ook: toegankelijkheid, WCAG, ARIA en toetsenbordnavigatie. Focusbeheer behoort tot de kernprincipes van inclusieve UI-ontwerp en moet vanaf het begin van het ontwikkelproces worden meegenomen.