Dialoogvenster krijgt geen focus bij openen

Een popup verschijnt. “Wil je cookies accepteren?”

Je drukt op Tab. En je zit in het navigatiemenu. Achter de popup. De focus is niet naar het dialoogvenster verplaatst.

Je kunt de popup zien. Maar niet bedienen. Niet zonder tientallen keren op Tab te drukken tot je toevallig bij de knoppen in de popup aankomt.

Dit is een van de meest frustrerende toetsenbordproblemen. Het venster is er. De knoppen zijn er. Maar de focus is ergens anders.

// Niet doen: popup tonen zonder focus te verplaatsen
function openDialog() {
  dialog.style.display = "block";
  // Focus blijft waar die was
}

// Wel doen: focus naar het dialoogvenster
function openDialog() {
  dialog.style.display = "block";
  dialog.querySelector("button, [href], input")?.focus();
}

Of gebruik het <dialog>-element:

<dialog id="mijnDialog">
  <h2>Cookies</h2>
  <button>Accepteren</button>
  <button>Weigeren</button>
</dialog>

document.getElementById("mijnDialog").showModal();
// Focus gaat automatisch naar het dialoogvenster

showModal() doet het zware werk: focus verplaatsen, focus trap, Escape om te sluiten. Allemaal gratis.

Geldt voor: cookiebanners, bevestigingspopups, lightboxes, mobiele menu’s, videoplayers in een overlay, formulieren in een modal.