TOEGANKELIJKHEID ≠ OVERLAY · 38
Zichtbare toetsenbordfocus wanneer een vaste kopbalk de volgende stap bedekt
📅 11 november 2026 · ⏱ 6 min leestijd
Na een druk op Tab kan de browser de focus verplaatsen naar een bedieningselement achter een vaste kopbalk. De pagina reageert nog, maar de gebruiker mist de visuele aanwijzing om verder te gaan.
01. Test een boeking
Open een boekingspagina en kies een datum met het toetsenbord. Bij de volgende druk op Tab verwacht je een link met informatie over wijzigingen of de knop om verder te gaan. Het document verschuift een paar pixels en de rand verdwijnt. De focus staat op het juiste element, maar de kopbalk die bovenaan blijft staan bedekt het. Met Enter kun je een volgende stap activeren zonder te hebben gezien welke handeling je kiest.
Bij een controle met de muis valt dit gemakkelijk buiten beeld. De aanwijzer laat zien waar je bent en je kunt vóór de klik zelf scrollen. Met het toetsenbord volgt de browser de focusvolgorde en bepaalt hij wanneer de weergave schuift. Behoud die volgorde tijdens de test. Zelf scrollen voordat je kijkt kan precies het probleem verhullen dat je wilt reproduceren.
02. Houd focus, indicator en volgorde uit elkaar
Focus bepaalt welk element toetsenbordinvoer ontvangt. De indicator is de visuele aanwijzing waarmee je dat element terugvindt. De volgorde bepaalt welk bedieningselement daarna komt. Een overlappende kopbalk kan een knop met een duidelijke focusrand bedekken. Omgekeerd kan een knop zichtbaar zijn zonder een aanwijzing te tonen zodra hij focus krijgt. Een goed zichtbare knop kan ook op een onlogisch moment in het proces focus krijgen.
Noteer welk element je verwacht en welk element daadwerkelijk focus ontvangt. Gebruik vooraf ingestelde ontwikkelaarstools of herhaal de reeks zonder de focus van de pagina te wijzigen. Vergelijk de begrenzing van het element met die van de overlappende laag. Een schermafbeelding toont het verschijnsel. De toetsen en de toestand van de component maken de fout reproduceerbaar.
03. Wat WCAG 2.2 vereist
Succescriterium 2.4.7 op niveau AA gaat over de zichtbaarheid van de focusindicator. Criterium 2.4.11, ook AA, controleert of een gefocust onderdeel niet volledig wordt verborgen door inhoud die de site heeft gemaakt. Beoordeel deze punten afzonderlijk. Een klein zichtbaar deel van een knop kan volledige bedekking voorkomen en toch onvoldoende zijn om de handeling goed te herkennen.
Criterium 2.4.12 op niveau AAA behandelt gedeeltelijke bedekking. Als ontwerpdoel kun je het hele element en de indicator zichtbaar houden. Criterium 2.4.3 op niveau A vraagt om een opeenvolgende focusvolgorde die betekenis en bediening bewaart wanneer de volgorde daarop invloed heeft. Een vaste kopbalk kan één eis schenden terwijl de andere worden gehaald. Beschrijf het waargenomen gedrag in het rapport en verwijs naar het toepasselijke criterium.
04. Zoek de laag die ruimte inneemt
Een vaste kopbalk kan van hoogte veranderen tijdens het scrollen, bij het openen van een menu of wanneer het venster smaller wordt. Een melding onderaan, een actiebalk of een hulppaneel kan ook een deel van het scherm innemen. Elk onderdeel kan op zichzelf goed werken, terwijl er samen weinig ruimte overblijft. Relevant is de hoogte in de toestand waarin het probleem optreedt.
Controleer ook welke container scrolt. Op een eenvoudige pagina is dat vaak het document. In een toepassing kan een intern paneel zijn eigen scrollgebied en werkbalk hebben. Een instelling op het document bereikt dat paneel mogelijk niet. Schakel de vaste positie tijdelijk uit in de inspector en herhaal de reeks. Als het element weer zichtbaar wordt, heb je een concrete hypothese om in het sjabloon te testen.
05. Reserveer ruimte in de scrollcontainer
Een oplossing is scroll-padding-block-start op de scrollcontainer instellen met de hoogte van de kopbalk in gedachten. Bij een vaste balk onderaan kun je scroll-padding-block-end overwegen. W3C-techniek C43 laat zien hoe je scrollruimte combineert met echte ruimte in de indeling, zodat het laatste element onder een balk vandaan kan komen. Controleer het begin en het einde van de route, omdat het scrollbereik begrensd is.
Een hoogte uit de desktopweergave kan tekortschieten als het menu over twee regels loopt. Gebruik waarden die bij de toestanden van het sjabloon passen en test formaatwijzigingen. Als de laag te veel van een laag venster inneemt, kan meescrollen met de inhoud een betere keuze zijn. Controleer automatisch scrollen bij focus en interne links, die inhoud eveneens dicht bij een kopbalk kunnen plaatsen.
06. Houd de focusaanwijzing in elke toestand zichtbaar
Behoud de indicator van de browser of ontwerp er een die herkenbaar blijft tegen de werkelijke achtergronden van de site. Een omlijning die op een witte kaart werkt kan in een donkerblauw menu verdwijnen. Test belangrijke knoppen, tekstlinks, pictogrammen en velden. Bekijk gewone en bezochte toestanden en controleer het contrast op de plek waar elk onderdeel verschijnt.
Met de CSS-selector :focus-visible kun je een stijl toepassen wanneer de browser een zichtbare aanwijzing nodig acht. Verwijder omtrekken niet overal zonder een getoetst alternatief. Bekijk containers die de rand met overflow afsnijden en regels die hem bij overlappende modules verbergen. Is de actieve knop alleen herkenbaar als de aanwijzer erboven staat, keer dan terug naar het toetsenbord en bekijk welke toestand het thema opmaakt.
07. Herhaal in beide richtingen en met vergroting
Begin vanuit een reproduceerbare toestand en noteer browser, venstergrootte en zoom. Ga vooruit met Tab en terug met Shift+Tab. Observeer elk element op het moment dat het focus ontvangt. Test aan de boven- en onderrand en bij het laatste element van een paneel. Sommige lagen bedekken een onderdeel alleen op de terugweg, wanneer de browser in tegengestelde richting scrolt.
Herhaal de proef met een uitgeklapte kopbalk, een gesloten menu en meldingen die bij een eerste bezoek verschijnen. In een smal venster of bij vergroting kan tekst omlopen en de beschikbare hoogte verkleinen. Een korte opname van de precieze reeks helpt om een sprong bij het scrollen te onderscheiden van een focuswisseling. Iemand moet het huidige element kunnen herkennen voordat diegene kiest of het wordt geactiveerd.
08. Herstel het Divi-sjabloon en controleer de route
Controleer in WordPress of de kopbalk uit het thema, een Theme Builder-sjabloon of een vastgezette module komt. Zoek waar de hoogte is ingesteld en welke regel het scrollen bepaalt. Herstel de component die de overlap veroorzaakt en controleer pagina’s die hem hergebruiken. Neem een lange pagina, een formulier en een route met interne navigatie mee.
Een overlay kan instellingen voor de presentatie bieden. De afmetingen van de kopbalk, focusvolgorde en gereserveerde ruimte horen bij de implementatie. Een automatische controle kan specifieke fouten vinden. Rond dit geval af door de boeking opnieuw met het toetsenbord te doorlopen, elk element op het juiste moment te zien en te bevestigen dat vooruit- en teruggaan mogelijk is zonder de oriëntatie te verliezen. Bewaar het resultaat bij de stappen voor toekomstige sjabloonwijzigingen.