Dialogfeld

Das Dialogelement ist ein nützliches Element zur Darstellung von Dialogen in HTML. Hier erfahren Sie, wie es funktioniert.

Ein modales Dialogfeld ist eine spezielle Art von Pop-up-Feld auf einer Webseite, das den Nutzer unterbricht, damit er sich darauf konzentriert. Es gibt einige gültige Anwendungsfälle für das Einblenden eines Dialogfelds, aber Sie sollten sich das gut überlegen. Modale Dialogfelder zwingen Nutzer, sich auf bestimmte Inhalte zu konzentrieren und den Rest der Seite zumindest vorübergehend zu ignorieren.

Dialogfelder können entweder modal (es kann nur mit den Inhalten im Dialogfeld interagiert werden) oder nicht modal (es ist weiterhin möglich, mit Inhalten außerhalb des Dialogfelds zu interagieren) sein. Modale Dialogfelder werden über dem restlichen Seiteninhalt angezeigt. Der Rest der Seite ist inaktiv und wird standardmäßig von einem halbtransparenten Hintergrund verdeckt.

Das semantische HTML-Element <dialog> zum Erstellen eines Dialogfelds bietet Semantik, Tastaturinteraktionen sowie alle Eigenschaften und Methoden der HTMLDialogElement-Schnittstelle.

Modale Dialogfelder

Hier ein Beispiel für ein Modal <dialog>. Öffnen Sie das Dialogfeld mit der Schaltfläche „Modales Dialogfeld öffnen“. Nach dem Öffnen gibt es drei Möglichkeiten, das Dialogfeld zu schließen: mit der Esc-Taste, durch Senden eines Formulars mit einer Schaltfläche, für die formmethod="dialog" festgelegt ist (oder wenn für das Formular selbst method="dialog" festgelegt ist), und mit der Methode HTMLDialogElement.close().

Die Klasse HTMLDialogElement hat drei Hauptmethoden sowie alle Methoden, die von HTMLElement übernommen wurden.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

Da <dialog> mit der Methode HTMLDialogElement.showModal() geöffnet wurde, handelt es sich um ein modales Dialogfeld. Wenn ein modales Dialogfeld geöffnet wird, werden alle anderen Elemente deaktiviert und verdeckt. Wenn Sie den Mauszeiger außerhalb des Dialogfelds auf die Benutzeroberfläche bewegen, werden Sie feststellen, dass sich alle Elemente so verhalten, als wäre pointer-events: none; festgelegt. Selbst der Button, mit dem das Dialogfeld geöffnet wird, reagiert nicht auf Interaktionen.

Wenn das Dialogfeld geöffnet wird, wird der Fokus darauf verschoben. Der Fokus wird auf das erste Element in der sequenziellen Tastaturnavigationsreihenfolge in diesem Dialogfeld gesetzt. Wenn Sie die tab-Taste wiederholt drücken, kann nur der Inhalt des Dialogfelds den Fokus erhalten, während das modale Dialogfeld geöffnet ist. Alles außerhalb des modalen Dialogfelds ist inaktiv, solange das Dialogfeld geöffnet ist.

Wenn ein Dialogfeld geschlossen wird, unabhängig davon, ob es modal ist oder nicht, wird der Fokus auf das Element zurückgesetzt, mit dem das Dialogfeld geöffnet wurde. Vermeiden Sie es, Dialogfelder programmatisch ohne Nutzeraktion zu öffnen. Wenn Sie das tun, müssen Sie dafür sorgen, dass der Fokus wieder auf dem Element liegt, auf dem er sich vor dem Öffnen des Dialogfelds befand. Das gilt insbesondere, wenn der Nutzer das Dialogfeld schließt, ohne damit zu interagieren.

Es gibt ein globales Attribut inert, mit dem ein Element und alle seine untergeordneten Elemente deaktiviert werden können, mit Ausnahme von aktiven Dialogfeldern. Wenn ein modales Dialogfeld mit showModal() geöffnet wird, ist es automatisch inaktiv oder deaktiviert. Das Attribut wird nicht explizit festgelegt.

Der Hintergrund, der alles außer dem Dialog verdeckt, kann mit dem Pseudoelement ::backdrop gestaltet werden. Der Hintergrund wird nur angezeigt, wenn ein <dialog> mit der Methode .showModal() angezeigt wird. Dieses Pseudoelement entspricht allen Hintergründen, einschließlich des Hintergrunds, der bei Verwendung der FullScreen API angezeigt wird, z. B. wenn ein Video im Vollbildmodus wiedergegeben wird, das nicht dasselbe Seitenverhältnis wie der Bildschirm oder Monitor hat.

Nicht modale Dialogfelder

Mit HTMLDialogElement.show() wird ebenfalls ein Dialogfeld geöffnet, ohne dass ein Hintergrund hinzugefügt oder etwas inaktiviert wird. Mit der Esc-Taste werden nicht modale Dialogfelder nicht geschlossen. Aus diesem Grund ist es noch wichtiger, eine Methode zum Schließen des nicht modalen Dialogfelds einzubauen. Wenn sich das Schließelement außerhalb des Dialogfelds befindet, wird der Fokus auf das Element verschoben, mit dem das Dialogfeld geöffnet wurde. Das ist möglicherweise nicht die beste Nutzererfahrung.

Eine Schaltfläche zum Schließen des Dialogfelds ist in der Spezifikation zwar nicht offiziell vorgeschrieben, sollte aber als erforderlich betrachtet werden. Mit der Esc-Taste wird ein modales Dialogfeld geschlossen, aber kein nicht modales. Eine sichtbare Schaltfläche, die den Fokus empfangen kann, verbessert die Barrierefreiheit und die Nutzerfreundlichkeit.

Dialogfeld schließen

Sie benötigen die HTMLDialogElement.close()-Methode nicht, um ein Dialogfeld zu schließen. Sie benötigen kein JavaScript. Wenn Sie das <dialog> ohne JavaScript schließen möchten, fügen Sie ein Formular mit einer Dialogmethode ein, indem Sie entweder method="dialog" für das <form> oder formmethod="dialog" für die Schaltfläche festlegen.

Wenn ein Nutzer das Formular mit der Methode dialog sendet, bleibt der Status der vom Nutzer eingegebenen Daten erhalten. Es gibt zwar ein „submit“-Ereignis – das Formular wird einer Einschränkungsvalidierung unterzogen (sofern novalidate nicht festgelegt ist) –, die Nutzerdaten werden jedoch weder gelöscht noch gesendet. Eine „Schließen“-Schaltfläche ohne JavaScript kann so geschrieben werden:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Vielleicht ist Ihnen in diesem Beispiel das Attribut autofocus aufgefallen, das für das schließende <button> festgelegt ist. Elemente, für die das Attribut autofocus innerhalb eines <dialog>-Elements festgelegt ist, erhalten beim Laden der Seite keinen Fokus, es sei denn, die Seite wird mit dem sichtbaren Dialogfeld geladen. Sie erhalten jedoch den Fokus, wenn das Dialogfeld geöffnet wird.

Wenn ein Dialogfeld geöffnet wird, erhält standardmäßig das erste fokussierbare Element im Dialogfeld den Fokus, sofern kein anderes Element im Dialogfeld das Attribut autofocus hat. Wenn Sie das Attribut autofocus für die Schaltfläche zum Schließen festlegen, wird sie beim Öffnen des Dialogfelds fokussiert. Die Einbeziehung von autofocus in eine <dialog> sollte jedoch nur nach sorgfältiger Überlegung erfolgen. Alle Elemente in der Sequenz, die vor dem automatisch fokussierten Element stehen, werden übersprungen. Wir gehen in der Fokuslektion noch genauer auf dieses Attribut ein.

Die HTMLDialogElement-Schnittstelle enthält das Attribut returnValue. Wenn ein Formular mit einem method="dialog" gesendet wird, wird der returnValue auf den name der Schaltfläche „Senden“ festgelegt, sofern vorhanden. Wenn wir <button type="submit" name="toasty">close</button> geschrieben hätten, wäre returnValue toasty.

Wenn ein Dialogfeld geöffnet wird, ist das boolesche Attribut open vorhanden. Das bedeutet, dass das Dialogfeld aktiv ist und mit ihm interagiert werden kann. Wenn ein Dialogfeld durch Hinzufügen des Attributs open anstelle von .show() oder .showModal() geöffnet wird, ist es nicht modal. Die Eigenschaft HTMLDialogElement.open gibt true oder false zurück, je nachdem, ob der Dialog für die Interaktion verfügbar ist. Es spielt keine Rolle, ob er modal ist oder nicht.

JavaScript ist zwar die bevorzugte Methode zum Öffnen eines Dialogfelds, aber wenn Sie das Attribut open beim Laden der Seite einfügen und es dann mit .close() entfernen, kann das Dialogfeld auch dann verfügbar sein, wenn JavaScript nicht verfügbar ist.

Weitere Details

tabindex nicht verwenden

Das Element, das zum Öffnen des Dialogfelds aktiviert wird, und die darin enthaltene Schaltfläche zum Schließen (und möglicherweise andere Inhalte) können den Fokus erhalten und sind interaktiv. Das Element <dialog> ist nicht interaktiv und kann nicht fokussiert werden. Fügen Sie dem Dialogfeld selbst nicht die Property tabindex hinzu.

ARIA-Rollen

Die implizite Rolle ist dialog. Wenn das Dialogfeld ein Bestätigungsfenster ist, in dem eine wichtige Nachricht angezeigt wird, die eine Bestätigung oder eine andere Reaktion des Nutzers erfordert, legen Sie role="alertdialog" fest. Das Dialogfeld sollte auch einen für Screenreader zugänglichen Namen haben. Wenn sichtbarer Text als barrierefreier Name verwendet werden kann, fügen Sie aria-labelledby="idOfLabelingText" hinzu.

CSS-Standardeinstellungen

Beachten Sie, dass Browser Standardformatierungen für dialog bereitstellen. In den User-Agent-Stylesheets von Firefox, Chrome und Edge wird color: CanvasText; background-color: Canvas; festgelegt und in Safari color: black; background-color: white;. Die color wird von dialog und nicht von body oder :root übernommen, was möglicherweise unerwartet ist. Das Attribut „background-color“ wird nicht übernommen.

Wissen testen

Testen Sie Ihr Wissen über das Dialogfeld.