Je cookiebanner laat de pagina verspringen

De pagina verspringt wanneer een element verschijnt, verdwijnt of van grootte verandert, en daardoor zichtbare inhoud verplaatst. Bij een cookiebanner gebeurt dat op drie momenten: wanneer de banner laat in de pagina wordt ingevoegd, wanneer ze op een mobiel anders van hoogte blijkt dan verwacht en wanneer ze na de keuze verdwijnt en de inhoud terugschuift.

De MDN-pagina over webprestaties (https://developer.mozilla.org/en-US/docs/Web/Performance) omschrijft prestaties ook als hoe soepel inhoud aanvoelt tijdens gebruik, niet alleen als laadtijd. De pagina bespreekt cookiebanners niet; het is hier een redactionele toepassing dat een banner die inhoud verplaatst de ervaring kan schaden, ook als de pagina snel laadt.

De cursus Learn Performance van web.dev (https://web.dev/learn/performance) geeft een inleiding in prestatieconcepten en kritieke renderstappen, maar geen vaste meetstappen voor banners. Gebruik daarom de ontwikkelaarstools van je browser en controleer in de documentatie van die tool hoe je layoutverschuivingen zichtbaar maakt, want schermnamen kunnen wijzigen.

1. Open de pagina in een privévenster zonder opgeslagen keuze, zodat de banner verschijnt.
2. Zet een mobiel scherm en een trage verbinding in de tools aan, want daar springt het vaakst iets.
3. Neem de laadfase op en noteer welk element verschuift en op welk moment.
4. Herhaal drie keer, want timing van scripts wisselt per keer.

Test vier situaties: eerste bezoek, na accepteren, na weigeren of instellen en een terugkerend bezoek met opgeslagen keuze. Maak bij elk moment een schermafbeelding voor en na, zodat je grotere verschuivingen kunt tonen. Kleine of korte verschuivingen zie je daarmee mogelijk niet; gebruik dan een opname of de tools van je browser.

Zoek per waarneming de bijbehorende oorzaak, en test die door in een testomgeving één factor tegelijk uit te zetten.

• Banner bovenaan in de normale paginastroom: de inhoud schuift omlaag zodra de banner verschijnt. Test door de banner tijdelijk uit te zetten en de schermafbeeldingen te vergelijken.
• Banner wordt laat geladen via een tagbeheertool of externe script: ze verschijnt pas na de inhoud. Kijk in het tijdsverloop wanneer het script binnenkomt.
• Hoogte onbekend: de tekst loopt op smalle schermen over meer regels. Test op meerdere schermbreedtes.
• Verdwijnen na de keuze: de ruimte wordt vrij en de inhoud springt omhoog.
• Inhoud na toestemming: ingesloten video's of kaarten laden pas na de keuze en krijgen geen vaste ruimte.

Noteer per oorzaak of ze alleen bij de eerste bezoeker voorkomt of ook bij terugkerende bezoekers.

De juiste plek hangt af van de inhoud van je pagina en van wat je toestemmingstool toelaat. Gebruik deze matrix als uitgangspunt en bevestig de keuze met je schermafbeeldingen.

Beslisregel: kies de optie waarbij de bestaande inhoud op alle vier je meetmomenten op dezelfde plek blijft staan. Toont een optie nog verschuiving, ga dan terug naar de oorzaaklijst.

Een banner die niet verspringt maar niet te bedienen is, lost niets op. De tutorialsverzameling van het W3C (https://www.w3.org/WAI/tutorials/) toont hoe je toegankelijke webinhoud ontwikkelt, onder meer voor afbeeldingen en tabellen. De bron behandelt cookiebanners niet specifiek; gebruik ze als algemeen vertrekpunt en zie de volgende punten als deelcontroles, niet als bewijs van WCAG-conformiteit:

• Kun je de banner met het toetsenbord bereiken en sluiten, en keert de focus daarna naar een logische plek terug?
• Zijn de keuzeknoppen even zichtbaar en even makkelijk te bedienen?
• Blijft tekst leesbaar bij vergroting, zonder dat de banner de hele pagina bedekt?

Of de inhoud en werking van je toestemmingsinstellingen aan de regels voldoen, is een apart onderwerp. Leg die vraag voor aan een deskundige. Deze gids test alleen het gedrag van de pagina.

Fictief voorbeeld, enkel met invoer en verwachte controles. Invoer: een testpagina waarop de banner als vaste balk onderaan staat, met een maximale hoogte die je vooraf vastlegt. Verwachte controles: op het eerste bezoek verandert de positie van de kop, de knop en de eerste afbeelding niet tussen de schermafbeelding vóór en na het verschijnen van de banner. Na accepteren en na weigeren blijft die positie gelijk. Bij een terugkerend bezoek verschijnt de banner niet en blijft de pagina ook stabiel. Wijkt een van de vier momenten af, noteer dan welk element verschuift en voeg dat toe aan de lijst voor je webbouwer.

Herhaal de test na elke aanpassing aan de banner, de toestemmingstool of de paginasjabloon, en ook op een andere browser. Resultaten hangen af van je pagina, je tool en je verbinding, dus beloof geen vaste uitkomst.

Wil je ook zien welke publieke signalen je website uitstuurt, bekijk ze dan via Marketing Scan. Een publieke scan meet zichtbare signalen en vervangt deze handmatige test van de banner niet.