Als een modaal dialoogvenster is geopend, verwachten gebruikers dat ze bekende bedieningselementen kunnen gebruiken om het te sluiten: op de Esc-toets op een toetsenbord drukken, de terugknop of het teruggebaar gebruiken op mobiele platforms of een sluitgebaar gebruiken met ondersteunende technologieën.
Toen het element <dialog> voor het eerst werd geïntroduceerd, kon het worden gesloten met de Esc-toets, maar niet met andere platformbedieningselementen, zoals een terugknop of -gebaar op mobiele apparaten. Met de toevoeging van het kenmerk closedby voor <dialog>-elementen is het uitgebreide gedrag van reageren op meer platformspecifieke bedieningselementen voor sluitingsverzoeken toegepast voor <dialog>-elementen die worden geopend in een modale status (dat wil zeggen wanneer ze imperatief worden geopend met de methode showModal() van het <dialog>-element in JavaScript of declaratief met de aanroeperopdracht show-modal). Ontwikkelaars hoeven dus geen specifieke wijziging aan te brengen als ze het element <dialog> al gebruiken.
<!-- MANDATORY: must be opened with either `showModal()` with JavaScript or the `show-modal` command using declarative command invokers in order respond to close requests including platform-specific controls. -->
<dialog aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests.</p>
</dialog>
Als een dialoogvenster zonder het kenmerk closedby wordt geopend in een modale status, reageert het op sluitingsverzoeken op dezelfde manier als wanneer het kenmerk closedby expliciet wordt ingesteld op closerequest.
<!-- This is unnecessary as it is the default behavior for modal dialogs -->
<dialog closedby="closerequest" aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests.</p>
</dialog>
Als je ook het gedrag 'licht sluiten' wilt, stel je closedby in op any:
<dialog closedby="any" aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests and light dismiss.</p>
</dialog>
Reservestrategieën
<dialog>-elementen die in een modale status zijn geopend, kunnen al worden gesloten met Esc, dus er is geen fallback nodig. Er is geen goede manier om sluitingsverzoeken te implementeren via de terugknop of gebaren op mobiele apparaten. Het is daarom eenvoudiger om deze functie te omarmen als een progressive enhancement, vooral omdat er andere inclusieve manieren zijn om het modale dialoogvenster te sluiten. Op dezelfde manier kan licht sluitgedrag voor een <dialog>-element met closedby="any" worden beschouwd als een progressive enhancement.