dialog

Käyttötilanteet

Käytetään .showModal()-metodilla avattua <dialog>-elementtiä. Natiivi elementti on tuettu kaikissa nykyisissä selaimissa ja hoitaa automaattisesti taustan passivoinnin, kohdistuseristyksen, Escape-sulkemisen, ::backdrop-tyylityskoukun ja yläkerroksen renderöinnin. Se säästää noin 200 riviä hauraasta JavaScriptistä.

role="dialog" <div>-elementissä on perusteltua vain, kun:

• Tuetaan vanhempia selaimia kuin Chrome 37 / Firefox 98 / Safari 15.4 (epätodennäköistä vuonna 2026).
• Suunnittelu vaatii dialogia, joka ei voi olla yläkerroksessa (harvinaista).
• Korjataan saavutettamatonta mukautettua modaalia refaktoroinnin yhteydessä.

Jokaisella dialogilla on oltava saavutettava nimi (vahvin malli on aria-labelledby, joka osoittaa näkyvään otsikkoon). Modaaleilla on lisäksi oltava aria-modal="true".

Näppäimistö- ja kohdistussopimus

APG-dialogimallin mukaisesti:

• Avattaessa kohdistus siirtyy ensimmäiseen tarkennettavaan elementtiin dialogin sisällä (usein sulkupainikkeeseen tai pääsyöttökenttään).
• Tab ja Shift+Tab kiertävät kohdistusta dialogin SISÄLLÄ — “kohdistuseristys”. Tab viimeisestä elementistä palaa ensimmäiseen; Shift+Tab ensimmäisestä palaa viimeiseen.
• Escape sulkee dialogin.
• Sulkemisen jälkeen kohdistus palaa elementtiin, joka avasi dialogin. Kohdistuksen tallentaminen ja palauttaminen on ehdotonta; käyttäjät, jotka menettävät paikkansa, jäävät ilman ankkuria.
• Muu sivu on inert-tilassa (tai aria-hidden="true" + ei-tarkennettavana varavaihtoehtona) dialogin ollessa auki.

Yleisimmät virheet

• Mukautettu dialogi ilman kohdistuseristystä. Tab siirtyy ulos dialogista ja sen taakse; käyttäjät menettävät kontekstin.
• Kohdistus ei palaudu laukaisijaan sulkemisen jälkeen. Seuraava Tab-painallus päätyy dokumentin body-elementtiin.
• Taustasisältö pysyy tarkennettavana Tab-näppäimellä, vaikka se on visuaalisesti piilossa dialogin takana.
• Ei saavutettavaa nimeä. Dialogi aukeaa ja ruudunlukuohjelma ilmoittaa vain “dialogi”.
• Mukautettu dialogi ilman aria-modal="true" — apuvälineteknologiat käsittelevät sitä tekstivirran osana.
• Escape sulkee dialogin, mutta dialogi on renderöity portaalin kautta, joka menettää näppäimistökohdistuksen sulkemisanimaation aikana.

Esimerkki

<!-- Suositeltava -->
<dialog id="confirm">
  <h2>Poistetaanko tämä luonnos?</h2>
  <p>Toimintoa ei voi peruuttaa.</p>
  <form method="dialog">
    <button value="cancel">Peruuta</button>
    <button value="delete" autofocus>Poista</button>
  </form>
</dialog>
<script>
  document.getElementById('confirm').showModal();
</script>

<!-- Kun <dialog> on mahdoton -->
<div role="dialog" aria-modal="true" aria-labelledby="dlgTitle">
  <h2 id="dlgTitle">Muokkaa profiilia</h2>
  …
</div>