dialog

När används det

Använd <dialog> öppnad via .showModal(). Det native elementet stöds i alla moderna webbläsare, hanterar den inaktiva bakgrunden, fokusinlåsningen, Escape-för-stängning, ::backdrop-stilkroken och top-layer-renderingen. Det sparar dig ungefär 200 rader skör JavaScript.

Använd role="dialog" på en <div> bara när:

• Du stöder webbläsare äldre än Chrome 37 / Firefox 98 / Safari 15.4 (osannolikt 2026).
• Designen kräver en dialog som inte kan leva i top-layer (sällsynt).
• Du rättar en otillgänglig custom-modal under en refaktorering.

Varje dialog MÅSTE ha ett tillgängligt namn (aria-labelledby som pekar på en synlig rubrik är det starkaste mönstret). Modala dialoger behöver också aria-modal="true".

Tangentbord + fokuskontrakt

Enligt APG:s dialog (modal)-mönster:

• Vid öppning flyttas fokus till det första fokusbara elementet inuti dialogen (ofta stängknappen, eller den primära inmatningen).
• Tab och Shift+Tab cyklar fokus INOM dialogen — en “fokusinlåsning”. Tab från det sista elementet återvänder till det första; Shift+Tab från det första återvänder till det sista.
• Escape stänger dialogen.
• Vid stängning återvänder fokus till det element som öppnade dialogen. Att spara och återställa fokus är obligatoriskt; användare som tappar sin plats har ingen förankring.
• Resten av sidan är inert (eller aria-hidden="true" + icke-fokuserbar som fallback) medan dialogen är öppen.

Vanliga fel

• Custom-dialog utan fokusinlåsning. Tab stegar ut ur dialogen och bakom den; användarna tappar kontexten.
• Fokus återställs inte till utlösaren vid stängning. Nästa Tab landar på dokumentets body.
• Bakgrundsinnehållet förblir fokuserbart via Tab trots att det är visuellt dolt bakom dialogen.
• Inget tillgängligt namn. Dialogen öppnas och skärmläsaren annonserar bara “dialog”.
• Custom-dialog utan aria-modal="true" — hjälpmedelsteknik behandlar den som inline-innehåll.
• Escape stänger dialogen, men den renderas via en portal som tappar tangentbordsfokus under stängningsanimeringen.

Exempel

<!-- Rekommenderat -->
<dialog id="confirm">
  <h2>Ta bort det här utkastet?</h2>
  <p>Det går inte att ångra.</p>
  <form method="dialog">
    <button value="cancel">Avbryt</button>
    <button value="delete" autofocus>Ta bort</button>
  </form>
</dialog>
<script>
  document.getElementById('confirm').showModal();
</script>

<!-- När <dialog> är omöjligt -->
<div role="dialog" aria-modal="true" aria-labelledby="dlgTitle">
  <h2 id="dlgTitle">Redigera profil</h2>
  …
</div>