dialog

Wanneer gebruiken

Gebruik <dialog> geopend via .showModal(). Het native element wordt ondersteund in alle huidige browsers, verzorgt de inerte achtergrond, de focusvangst, Escape-om-te-sluiten, de ::backdrop-stylinghaak en de top-layer-rendering. Dit bespaart zo’n 200 regels fragiele JavaScript.

Grijp naar role="dialog" op een <div> alleen wanneer:

• Ondersteuning nodig is voor browsers ouder dan Chrome 37 / Firefox 98 / Safari 15.4 (onwaarschijnlijk in 2026).
• Het ontwerp een dialoogvenster vereist dat niet in de top-layer kan staan (zeldzaam).
• Een ontoegankelijk aangepast modaal venster tijdens een refactor wordt hersteld.

Elk dialoogvenster MOET een toegankelijke naam hebben (aria-labelledby die wijst naar een zichtbare kop is het sterkste patroon). Modale dialoogvensters vereisen ook aria-modal="true".

Toetsenbord- en focuscontract

Conform het APG-patroon voor dialoogvensters (modaal):

• Bij openen verplaatst de focus zich naar het eerste focusbare element binnen het dialoogvenster (vaak de sluitknop of het primaire invoerveld).
• Tab en Shift+Tab wisselen de focus BINNEN het dialoogvenster — een “focusvangst”. Tab van het laatste element keert terug naar het eerste; Shift+Tab van het eerste keert terug naar het laatste.
• Escape sluit het dialoogvenster.
• Bij sluiten keert de focus terug naar het element dat het dialoogvenster heeft geopend. Het opslaan en herstellen van de focus is ononderhandelbaar; gebruikers die hun positie kwijtraken hebben geen anker.
• De rest van de pagina is inert (of aria-hidden="true" met niet-focusbare elementen als terugval) terwijl het dialoogvenster open is.

Veelvoorkomende fouten

• Aangepast dialoogvenster zonder focusvangst. Tab stapt buiten het dialoogvenster en erachter; gebruikers verliezen de context.
• Focus niet hersteld naar de trigger bij sluiten. De volgende Tab landt op de documentinhoud.
• Achtergrondinhoud blijft via Tab bereikbaar terwijl deze visueel achter het dialoogvenster verborgen is.
• Geen toegankelijke naam. Het dialoogvenster opent en de schermlezer kondigt alleen “dialoog” aan.
• Aangepast dialoogvenster zonder aria-modal="true" — hulptechnologie behandelt het als inline inhoud.
• Escape sluit het dialoogvenster, maar het dialoogvenster wordt weergegeven via een portaal dat toetsenbordfocus verliest tijdens de sluitanimatie.

Voorbeeld

<!-- Voorkeur -->
<dialog id="confirm">
  <h2>Dit concept verwijderen?</h2>
  <p>Dit kan niet ongedaan worden gemaakt.</p>
  <form method="dialog">
    <button value="cancel">Annuleren</button>
    <button value="delete" autofocus>Verwijderen</button>
  </form>
</dialog>
<script>
  document.getElementById('confirm').showModal();
</script>

<!-- Wanneer <dialog> onmogelijk is -->
<div role="dialog" aria-modal="true" aria-labelledby="dlgTitle">
  <h2 id="dlgTitle">Profiel bewerken</h2>
  …
</div>