dialog

Hvornår skal den bruges

Brug <dialog> åbnet via .showModal(). Det native element understøttes i alle aktuelle browsere, håndterer den inaktive baggrund, fokusindespærringen, Escape-luk, ::backdrop-stilkrogen og top-layer-rendering. Det sparer ca. 200 linjer skrøbelig JavaScript.

Brug role="dialog" på en <div> kun når:

• Du understøtter browsere ældre end Chrome 37 / Firefox 98 / Safari 15.4 (usandsynligt i 2026).
• Designet kræver en dialog, der ikke kan leve i top-layer (sjældent).
• Du lappes en utilgængelig brugerdefineret modal under en refaktorering.

Enhver dialog SKAL have et tilgængeligt navn (aria-labelledby der peger på en synlig overskrift er det stærkeste mønster). Modale dialoger har også brug for aria-modal="true".

Tastatur- og fokuskontrakt

Ifølge APG-dialogmønstret (modal):

• Ved åbning flyttes fokus til det første fokuserbare element inde i dialogen (ofte lukkeknappen eller det primære input).
• Tab og Shift+Tab cykler fokus INDE I dialogen — en “fokusindespærring”. Tab fra det sidste element returnerer til det første; Shift+Tab fra det første returnerer til det sidste.
• Escape lukker dialogen.
• Ved lukning returneres fokus til det element, der åbnede dialogen. Gemning og gendannelse af fokus er ikke til forhandling; brugere, der mister deres plads, har ingen reference.
• Resten af siden er inert (eller aria-hidden="true" + ikke-fokuserbar som fallback), mens dialogen er åben.

Typiske fejl

• Brugerdefineret dialog uden fokusindespærring. Tab træder ud af dialogen og bag den; brugere mister konteksten.
• Fokus gendannes ikke til triggeren ved lukning. Næste Tab lander på dokumentets body.
• Baggrundsindhold forbliver fokuserbart via Tab, selv om det er visuelt skjult bag dialogen.
• Intet tilgængeligt navn. Dialogen åbner, og skærmlæseren annoncerer kun “dialog”.
• Brugerdefineret dialog uden aria-modal="true" — hjælpeteknologi behandler den som inline-indhold.
• Escape lukker dialogen, men dialogen rendres gennem en portal, der mister tastaturfokus under lukkeanimationen.

Eksempel

<!-- Foretrukket -->
<dialog id="confirm">
  <h2>Slet dette udkast?</h2>
  <p>Dette kan ikke fortrydes.</p>
  <form method="dialog">
    <button value="cancel">Annuller</button>
    <button value="delete" autofocus>Slet</button>
  </form>
</dialog>
<script>
  document.getElementById('confirm').showModal();
</script>

<!-- Når <dialog> er umuligt -->
<div role="dialog" aria-modal="true" aria-labelledby="dlgTitle">
  <h2 id="dlgTitle">Rediger profil</h2>
  …
</div>