Dialoge mit dem closedby-Attribut aufwerten

Das native HTML-Element <dialog> ist einfach großartig. Damit lassen sich auf einfache Weise barrierefreie Modal-Dialoge erstellen, die für alle Nutzer:innen gut funktionieren. Und es wird seit 2022 von allen modernen Browsern unterstützt.

Aber es wird noch besser: Mit dem neuen Attribut closedby könnt ihr festlegen, durch welche Aktionen der Dialog geschlossen wird. Ihr könnt ein Light-Dismiss-Verhalten hinzufügen oder genau das Gegenteil tun: z.B. verhindern, dass der Dialog durch Drücken der ESC Taste geschlossen wird.

Foto: © Miguel Á. Padriñán / pexels.com

Wir sehen uns die technische Spezifikation sowie ein paar Anwendungsfälle für das neue Attribut an.

So funktioniert es

Die HTML-Spezifikation definiert closedby als ein enumeriertes Attribut mit den folgenden Werten:

• any – Durch Close-Requests oder Klicken außerhalb des Dialogs wird dieser geschlossen.
• closerequest – Close-Requests schließen den Dialog.
• none – Der Dialog wird durch keine Benutzeraktion automatisch geschlossen.

Wenn ihr das Attribut closedby nicht für einen Modaldialog definiert, verhält dieser sich so, als wäre der Wert closerequest . Das bedeutet, dass der Dialog durch Drücken der ESC Taste auf Desktop-Plattformen oder durch eine „Zurück“- oder „Schließen“-Geste auf mobilen Plattformen geschlossen wird.

Anwendungsfälle

Light-Dismiss für Informations-Dialoge

Manche Dialoge dienen lediglich der Darstellung von Information. Von Benutzer:innen wird nicht erwartet, dass diese eine Entscheidung treffen oder ein Formular ausfüllen. Meiner Meinung nach ein idealer Anwendungsfall für Light-Dismiss: Das Dialogfeld sollte sich schließen, wenn man außerhalb des Feldes klickt oder tippt.

Bevor es das closedby Attribut gab, war zusätzlicher JavaScript-Code erforderlich, um das Schließen des Dialoges zu implementieren. Ein Beispiel findet ihr in meinem Artikel „Warum du das native Dialog-Element nutzen solltest“. Zum Glück benötigen wir jetzt nur noch den folgenden HTML-Code:

<dialog closedby="any">
    <!-- content -->
</dialog>

Genial! 🥳

Versehentliches Schließen verhindern

Dialogfelder eignen sich hervorragend, um Arbeitsabläufe wie beispielsweise die Dateneingabe über ein Formular zu kapseln. Auch den Onboarding-Prozess für eine Webanwendung könnt ihr mithilfe eines Dialogs abwickeln.

In diesen Fällen solltet ihr verhindern, dass Nutzer:innen den Dialog versehentlich schließen, z.B. über die ESC Taste. Andernfalls gingen die Daten verloren, die bereits in das Formular eingegeben wurden. Oder man könnte den Onboarding-Dialog nicht erneut aufrufen.

Daher solltet ihr closedby=“none” auf das Dialogelement setzen. Nun können Nutzer das Dialogfeld nur noch über einen von der Entwicklerin festgelegten Mechanismus schließen, beispielsweise über eine Schaltfläche zum Schließen. Hier ein Beispiel:

<dialog id="mydialog" closedby="none">
    <!-- content -->
    <button commandfor="mydialog" command="close">
        Continue
    </button>
</dialog>

Vielleicht kennt ihr die Attribute command und commandfor für Button-Elemente noch nicht. Sie sind Teil eines neuen Web-Features namens Invoker Commands API. Ihr müsst sie nicht unbedingt verwenden. Aber ich mag ihre Einfachheit und Eleganz, deshalb wollte ich sie in mein Codebeispiel aufnehmen. 😉

Browser-Unterstützung

Das closedby Attribut wird bereits von Firefox, Chrome und Edge unterstützt. Dank Interop 2026 sollte auch Safari/WebKit bis Ende des Jahres nachziehen.

Nützliche Links

• Das closedby-Attribut (MDN)
• „Accessibility Engineering — Lass die Web-Plattform die Arbeit machen“ (Abschnitt: „Das dialog Element: Immer oben auf“)
• „Native Dialoge und die Popover API — Das solltet ihr wissen“

Erstellt am 28.03.2026