Een cookiebanner onderaan het scherm. “Wij gebruiken cookies.” Twee knoppen: Accepteren en Weigeren.
Je drukt op Tab. De focus gaat naar het logo. Tab. Naar het menu. Tab. Tab. Tab. Door alle menulinks. Tab. Door de content. Tab. Door de sidebar. Tab. Door de footer.
En dan — eindelijk — bij de cookiebanner.
Ondertussen bedekt de banner de content die je net probeerde te lezen.
Het probleem: de cookiebanner staat onderaan de HTML. De focus volgt de HTML-volgorde. Dus eerst de hele pagina, dan de banner.
Twee oplossingen:
- Zet de banner bovenaan in de HTML:
<div class="cookiebanner" role="dialog" aria-label="Cookiemelding">
<p>Wij gebruiken cookies.</p>
<button autofocus>Accepteren</button>
<button>Weigeren</button>
</div>
<header>...</header>
<main>...</main>
- Verplaats de focus met JavaScript:
window.addEventListener("load", () => {
const banner = document.querySelector(".cookiebanner");
if (banner) banner.querySelector("button")?.focus();
});
Waarom is dit zo belangrijk?
Omdat de cookiebanner de eerste interactie is die je van je bezoeker vraagt. Als die interactie pas na 30 tabs bereikbaar is, begin je de ervaring met frustratie.
