Rol Venster

`alertdialog`

Een dialoogvenster dat een urgente melding overbrengt en een gebruikersreactie vereist. Combineert dialoogvenster-semantiek met een assertieve aankondiging. Gebruik alleen voor destructieve bevestigingen, blokkerende fouten of onderbrekingen die niet kunnen wachten.

Wanneer gebruiken

Uitsluitend voor onderbrekingen: een fout die de gebruiker blokkeert om verder te gaan, een bevestigingsdialoog “Weet u zeker dat u wilt verwijderen?”, een waarschuwing voor niet-opgeslagen wijzigingen bij het navigeren weg. alertdialog inzetten voor reguliere modals is overdreven — gebruik daarvoor gewone role="dialog".

Het verschil met role="dialog" is dat een alertdialog wordt aangekondigd als een role="alert" — assertief en onmiddellijk — wanneer het verschijnt. Dit is passend voor echte onderbrekingen; misbruik leidt tot vermoeidheid bij schermlezers.

aria-labelledby (wijzend naar de titel) en aria-describedby (wijzend naar de bodytekst) zijn beide vereist. De alertdialog moet ten minste één focusbare knop bevatten zodat de gebruiker hem kan sluiten.

Toetsenbord- en focuscontract

Volgens het APG alertdialog-patroon:

Focus verplaatst naar de alertdialog bij openen — doorgaans naar de veiligste knop (Annuleren), zodat een onbedoelde Enter geen destructieve actie bevestigt.
Tab / Shift+Tab laat de focus binnen het dialoogvenster rondgaan.
Escape sluit de alertdialog en geeft de focus terug aan de trigger.
De rest van de pagina is inert zolang de alertdialog open is.

Kies de initiële focus zorgvuldig: bij “Verwijderen?”-prompts dient de focus standaard op Annuleren te staan — nooit op de destructieve knop.

Veelvoorkomende fouten

role="alertdialog" gebruiken voor elke modal. Schermlezers bombarderen de gebruiker bij elke modal-opening met de assertieve aankondiging.
Initiële focus op de destructieve knop (Verwijderen, Weggooien) — een vergissing met Enter wist het werk van de gebruiker.
Ontbrekende aria-describedby op de bodytekst. De gebruiker hoort de titel en de knoppen maar niet de waarschuwing.
Alertdialog zonder knoppen — er is geen manier om hem te sluiten, terwijl de rol een bruikbare reactie vereist.
Alertdialogs die na een time-out automatisch sluiten. Ondermijnt de semantiek “vereist een reactie”.

Voorbeeld

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Delete draft?</h2>
  <p id="confDesc">"Untitled draft (March 12)" will be permanently deleted. This action cannot be undone.</p>
  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete draft</button>
</div>