Focus

Focus is de actieve toestand van een interactief element (bijv. een knop, link of formulierveld) dat op dat moment input van het toetsenbord of een hulpmiddel zoals een schermlezer ontvangt. De gebruiker kan door de interface navigeren met de Tab-toets (vooruit), Shift+Tab (achteruit) en pijltjestoetsen, terwijl de browser aangeeft welk element in focus staat met een visuele indicator (de zogeheten focusring).

Definitie en gedrag

• Focus bepaalt waar toetsenbordacties terechtkomen (bijv. typen in een invoerveld, Enter om een knop te activeren).
• Hover is muisover; active is de toestand tijdens een klik of toetsactivatie. Deze verschillen functioneel van focus.
• Besturingssystemen en browsers leveren standaard een focusindicator. Deze mag vormgegeven worden, maar mag niet ontbreken.

Technische implementatie

• CSS: pseudo-klassen :focus, :focus-visible en :focus-within maken het mogelijk om focusstijlen consistent te tonen. Gebruik :focus-visible om focusindicatoren primair voor toetsenbordgebruikers te tonen.
• JavaScript: verplaats de focus waar nodig met element.focus() (optioneel met { preventScroll: true }). Beheer focus bij dynamische content, modals en routewissels.
• Tabindex: tabindex="0" maakt een element focusbaar in de natuurlijke tabvolgorde; tabindex="-1" maakt een element programmatisch focusbaar (maar niet via Tab); positieve waarden (>0) verstoren de natuurlijke volgorde en worden afgeraden.
• Indicatoren: verwijder nooit de focusring zonder een duidelijk, contrastrijk alternatief. Zorg voor voldoende contrast en zichtbaarheid in alle toestanden.

Toegankelijkheid en WCAG

Correct focusbeheer is essentieel voor gebruikers die geen muis gebruiken en voor schermlezers. Relevante succescriteria uit WCAG (2.1/2.2) zijn o.a.:

• 2.1.1 Keyboard: alle functionaliteit is met het toetsenbord te bedienen.
• 2.4.3 Focus Order: de focusvolgorde is logisch en intuïtief.
• 2.4.7 Focus Visible: de focusindicator is zichtbaar.
• 2.4.11 Focus Appearance (2.2): minimale zichtbaarheidseisen voor focusindicatoren.

Veelgemaakte fouten

• Focusring verwijderen (bijv. outline: none) zonder alternatief: dit breekt toegankelijkheid.
• Onlogische tabvolgorde door misbruik van positieve tabindex of door visuele herordening (CSS) zonder semantische correctie.
• Geen focusbeheer bij modals, off-canvas navigatie of SPA-routewissels, waardoor gebruikers de context kwijtraken of vastlopen.
• Custom componenten zonder juiste semantiek (bijv. een div die op een knop lijkt, maar niet focusbaar is).

Focus speelt een rol in vrijwel elke interactieve interface. Enkele veelvoorkomende toepassingen en best practices:

Formulieren en CTA's

• Formuliervelden: toon een duidelijke, contrastrijke focusstaat. Plaats bij validatiefouten de focus op de eerste fout en geef beschrijvende foutmeldingen.
• Call-to-actions: zorg voor kliks- en toetsactivatie (Enter/Space). Geef focus- en hoverstijlen die voldoende van elkaar verschillen.
• Autofocus: gebruik spaarzaam om onverwachte contextsprongen te voorkomen; zet het alleen in als het de taak versnelt en toegankelijk blijft.

Navigatie en menu's

• Skiplinks (bijv. 'Ga naar hoofdinhoud'): maak ze zichtbaar bij focus en verplaats de focus naar het hoofdgedeelte (tabindex='-1' op de heading kan helpen).
• Menustructuren: implementeer toetsenbordpatronen (Tab naar het menu, pijltjestoetsen binnen menu, Esc om te sluiten) en houd de focus binnen het geopende menu.

Modals en dialogen

• Verplaats bij openen de focus naar het dialoogvenster (of de eerste zinvolle control), trap de focus binnen het dialoog, en herstel de focus naar de trigger bij sluiten.
• Gebruik semantiek zoals role='dialog' of role='alertdialog' met aria-modal='true' en een gekoppelde titel.

Single Page Applications (SPA)

• Bij routewissels: update de paginatitel en verplaats de focus naar de hoofdheading of het hoofdlandmark zodat schermlezer- en toetsenbordgebruikers context krijgen.
• Beheer focus na dynamische updates (laden, foutmeldingen, notificaties) om de gebruiker niet te desoriënteren.

Componentbibliotheken

• Zorg dat custom componenten (tabs, accordeons, carrousels) focusbaar zijn, de juiste ARIA-roles en -toetsenbordpatronen volgen en consistente focusstijlen tonen.
• Test componenten met uitsluitend toetsenbordnavigatie en in high-contrast-modi.