Focus niet verborgen (minimum)

Wat het vereist

Wanneer een gebruiker naar een bedieningselement tabt, moet ten minste een deel van dat element zichtbaar blijven. Het meest voorkomende faalpatroon: een gebruiker tabt voorbij een vaste header, de pagina scrolt automatisch zodat de gefocuste link achter de vaste balk terechtkomt, en de gebruiker ziet de focusring niet meer. Het bedieningselement heeft nog steeds focus en reageert nog steeds op Enter, maar de gebruiker is ervan onbewust.

Het succescriterium stelt een minimum: het gefocuste element mag gedeeltelijk bedekt zijn, maar niet volledig. Het AAA-niveau 2.4.12 verhoogt dit naar „in het geheel niet verborgen.“

Dit is een van de vier nieuwe bedienbaarheidssuccescriteria die in WCAG 2.2 zijn geïntroduceerd en heeft grote impact gehad omdat vaste headers, vaste voetteksten, cookiebanners en chatwidgetbellen alomtegenwoordig zijn.

Hoe te voldoen

• Voeg CSS scroll-margin-top toe aan focusbare elementen, gelijk aan de hoogte van de vaste header, zodat browsers het gefocuste bedieningselement automatisch buiten de header scrollen.
• Zorg er voor vaste voetteksten en chatbellen voor dat zij geen enkel focusbaar element volledig bedekken. Verklein ze bij focus of verankert ze zo dat er ruimte aan de paginarand overblijft.
• Cookiebanners en afsluitbare overlays: maak ze nooit vastzittend op een manier die latere tabstops eronder laat vastlopen. Maak ze modaal (met focusval) of niet-blokkerend.
• Test bij pagina’s met zowel een vaste header als een vaste voettekst de tabvolgorde rondom het verticale midden van het viewport — daar wordt het gefocuste element samengeperst.
• Gebruik scroll-padding-top op de scrollcontainer als fallback voor oudere browsers.

html { scroll-padding-top: 80px; }       /* gelijk aan vaste-headerhogte */
:target, :focus { scroll-margin-top: 80px; }

Veelvoorkomende fouten

• Vaste header zonder scroll-padding-compensatie: elke tab naar de bovenste helft van het viewport verbergt de focusring.
• Cookiebanner vastzittend aan de onderkant die de laatste rij formuliervelden bedekt wanneer die velden focus ontvangen.
• Live-chatwidget rechtsonder die overlapt met een „Verzenden“-knop in de hoek van een formulier.
• Promotionele vaste balken (Black Friday-banners) toegevoegd door marketingteams zonder de scroll-padding-tokens bij te werken.
• Vaste tabelkoppen in dashboards waarbij Tab naar de eerste datarij achter de koprij terechtkomt.

Waarom dit belangrijk is

Dit succescriterium repareert een klasse fouten die toetsenbordgebruikers dagelijks frustreert, maar zelden opduikt in geautomatiseerde scans — geen axe-regel kan voorspellen op welke scrollpositie een vast element een gefocust element overlapt. Het treft ook onevenredig schermmagnificatiegebruikers, wier zichtbare viewport al teruggebracht is tot een kwart van het scherm, waardoor het vaste element een nog groter aandeel inneemt.

Verwacht dat 2.4.11 een van de meest geciteerde nieuwe bevindingen in auditrapportages van 2026 zal zijn. De oplossing is klein (enkele CSS-tokens), maar vereist coördinatie van elk team dat een vast element beheert — header, voettekst, banner, widget.