Zum Hauptinhalt springen
FigmaOpenCode

Dialog

Synonyme: Modal, Overlay, Popup
Ähnliche Komponenten: Alert, Accordion

Kurzbeschreibung​

Kommuniziert mit Nutzenden, fordert Eingaben/Bestätigungen an oder übermittelt wichtige Infos.

Beispiele​

Standard Dialog​

Code anzeigen
<dialog id="modal1" class="kern-dialog" aria-labelledby="modal1_heading" open>
<header class="kern-dialog__header">
  <h2 class="kern-dialog__heading" id="modal1_heading">Frage?</h2>
  <button class="kern-dialog__closer kern-btn kern-btn--tertiary">
    <span class="kern-icon kern-icon--close kern-icon--md" aria-hidden="true"></span>
    <span class="kern-sr-only">Schließen</span>
  </button>
</header>
<section class="kern-dialog__content">
  <p>
    Folgen beschreiben...
    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  </p>
</section>
<footer class="kern-dialog__footer">
  <button class="kern-btn kern-btn--secondary">Abbrechen</button>
  <button id="confirmBtn" class="kern-btn kern-btn--primary">Löschen</button>
</footer>
<!-- only for displaying it properly on documentation page -->
<style>#modal1 { position: relative}</style>
</dialog>

Beschreibung​

Ein Dialog ist eine Komponente, die vorübergehend erscheint, um die Interaktion zwischen der Anwendung und dem Nutzenden zu fördern. Dialoge dienen dazu, wichtige Informationen zu vermitteln, Eingaben von Nutzenden abzufragen oder Entscheidungen zu bestätigen. Sie überlagern den Hauptinhalt und erfordern eine bewusste Handlung oder Aufmerksamkeit des Nutzenden. Dialoge können modal sein, was bedeutet, dass sie den Fokus vollständig einfangen und Nutzende zur Interaktion zwingen, oder non-modal, wodurch der Hauptinhalt weiterhin zugänglich bleibt.

Dialoge sind ein stark aufdringliches Muster und sollten daher nur für wichtige, zeitkritische oder irreversible Aktionen genutzt werden. 

Die Wahl des Dialog-Typs hängt vom Anwendungsfall ab. Hier ein paar Beispiele:

  • Verwendung: Um die Nutzende über eine Aktion zu informieren.
  • Beispiel: „Speichern erfolgreich“.
  • Empfehlung: Nicht-modal, Overlay-Klick zum Schließen erlaubt.

Dialog mit Javascript öffnen​

Ein Dialog kann durch einen Button geöffnet werden, wobei Datenattribute (data-dialog-target) verwendet werden, um die Buttons mit den Dialogen zu verbinden.

Code anzeigen
<button data-dialog-target="modal2" class="kern-btn kern-btn--primary">Open Dialog</button>

<dialog id="modal2" class="kern-dialog" aria-modal="true" aria-labelledby="modal2_heading">
  <form>
    <header class="kern-dialog__header">
      <h2 class="kern-dialog__heading" id="modal2_heading">Frage?</h2>
      <button class="kern-dialog__closer kern-btn kern-btn--tertiary" formmethod="dialog">
        <span class="kern-icon kern-icon--close kern-icon--md" aria-hidden="true"></span>
        <span class="kern-sr-only">Schließen</span>
      </button>
    </header>
    <section class="kern-dialog__content">
      <p>
        Folgen beschreiben...
        Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
    </section>
    <footer class="kern-dialog__footer">
      <button class="kern-btn kern-btn--secondary" formmethod="dialog">Abbrechen</button>
      <button id="confirmBtn" class="kern-btn kern-btn--primary" type="submit">Löschen</button>
    </footer>
  </form>
</dialog>

<script>
  document.querySelectorAll("[data-dialog-target]").forEach((button) => {
    const dialogId = button.getAttribute("data-dialog-target");
    const dialog = document.getElementById(dialogId);

    if (dialog) {
      button.addEventListener("click", () => dialog.showModal());
      dialog.addEventListener("click", (event) => {
        if (event.target === dialog) {
          dialog.close();
        }
      });
      const submitButton = dialog.querySelector('button[type="submit"]');
      if (submitButton) {
        submitButton.addEventListener("click", (event) => {
          event.preventDefault();
          console.log("Absenden-Button wurde geklickt!");
          dialog.close();
        });
      }
    }
  });
</script>

Verhalten​

  • Der Button mit data-dialog-target öffnet den entsprechenden Dialog.
  • Der Dialog kann über den Schließen-Button oder durch einen Klick auf den Hintergrund geschlossen werden.

Hinweise​

1. Einsatz des <form>-Elements im Dialog​

  • Das <form>-Element strukturiert die Dialoginteraktionen und ermöglicht native Browser-Funktionen wie das Schließen eines Dialogs durch Buttons mit formmethod="dialog".
  • Es erleichtert die Handhabung von Formularen innerhalb des Dialogs, z. B. für Bestätigungs- oder Abbruchaktionen.

2. Verwendung des autofocus-Attributs​

  • Das autofocus-Attribut sorgt dafür, dass ein spezifisches Eingabeelement (z. B. ein Textfeld) oder ein Button automatisch fokussiert wird, sobald der Dialog geöffnet wird.
  • Dies verbessert die Benutzerfreundlichkeit, indem z. B. der Cursor direkt in ein Eingabefeld gesetzt oder ein primärer Button hervorgehoben wird.
  • Es ist besonders nützlich, um den Fokusfluss in Dialogen intuitiv zu steuern, ohne dass zusätzliche JavaScript-Logik erforderlich ist.

3. Browser-Unterstützung​

Die Funktionalität von <dialog>, formmethod="dialog" und autofocus wird in modernen Browsern unterstützt. Für ältere Browser sollte ein Polyfill in Betracht gezogen werden, falls benötigt.

Verwendungsregeln​

Dialoge sollten gezielt und sparsam eingesetzt werden, um den Arbeitsfluss der Nutzenden nicht zu stören. Verwende Dialoge nur, wenn sofortige Entscheidungen oder Eingaben benötigt werden. Alternativen wie Inline-Komponenten oder Tooltips sind vorzuziehen, wenn die Unterbrechung nicht notwendig ist.

Ein Dialog sollte eine klare und intuitive Struktur haben, um den Nutzenden gezielt zu führen. Der Titel (h2) fasst den Zweck des Dialogs zusammen und gibt den Kontext der Aktion wieder. Die Beschreibung sollte prägnant und informativ sein und erklären, was von den Nutzenden erwartet wird. Schaltflächen müssen mindestens zwei klare Optionen bieten: eine primäre Aktion (z. B. „Speichern“) und eine sekundäre (z. B. „Abbrechen“), um Entscheidungen zu erleichtern.

Es sollten immer alternative Schließmöglichkeiten angeboten werden, damit Nutzende den Dialog bewusst schließen können – beispielsweise über ein „X“-Symbol oben rechts oder die Escape-Taste. Das Schließen durch Overlay-Klicks sollte bei kritischen Dialogen vermieden werden, um versehentliche Aktionen auszuschließen.

Ein Dialog sollte auf kleine Informationsmengen beschränkt bleiben. Lange oder komplexe Inhalte wie mehrstufige Formulare oder ausführliche Anleitungen gehören nicht in einen Dialog. Für solche Fälle sollten separate Seiten oder Panels genutzt werden.

Dos und Don’ts​

  • Verwende nicht-modale Dialoge für unterstützende Informationen, die den Arbeitsfluss nicht stören.
  • Stelle sicher, dass die Benutzer/innen immer eine bewusste Aktion ausführen können, um den Dialog zu schließen.
  • Kommuniziere klar den Zweck des Dialogs mit eindeutigen Überschriften und Schaltflächen.
  • Biete spezifische und eindeutige Beschriftungen für Schaltflächen an (z. B. „Speichern“, „Abbrechen“).
  • Nutze keine sticky Elemente, wie Header oder Footer, da sie bei vergrößerter Nutzung, Inhalte überlagern können.

Barrierefreiheit​

  • Fokusmanagement: Beim Öffnen des Dialogs muss der Fokus automatisch auf das erste interaktive Element (z. B. die Überschrift oder die primäre Schaltfläche) gesetzt werden. Nach dem Schließen des Dialogs wird der Fokus auf das auslösende Element zurückgesetzt. Falls der Dialog automatisch geöffnet wurde, sollte der Fokus zum Anfang des Hauptinhalts springen.

  • Klare Kennzeichnung und Kontext: Der Dialog muss die ARIA-Rolle role="dialog" oder role="alertdialog" verwenden, um Bildschirmleseprogrammen den Dialogkontext zu vermitteln. Eine klare Überschrift sollte den Inhalt und Zweck des Dialogs beschreiben. Maus- und Tastaturbenutzende müssen informiert werden, dass es sich um einen Dialog handelt, der im Fokus steht.

  • Interaktionseinschränkung: Während ein modaler Dialog geöffnet ist, darf keine Interaktion mit Inhalten außerhalb des Dialogs möglich sein. Alle anderen Inhalte der Seite müssen unzugänglich gemacht werden, beispielsweise durch das Attribut aria-hidden="true". Das Scrollen auf der Seite sollte deaktiviert werden, solange der Dialog geöffnet ist.
  • Tastaturnavigation: Nutzende müssen den Dialog vollständig mit der Tastatur bedienen können. Nutzende sollten die Elemente im Dialog mit der Tabulator-Taste navigieren und den Dialog mit der Escape-Taste schließen können. Die Tabulatortaste darf die Nutzenden nicht aus dem Dialog herausführen, um Fokusfallen zu vermeiden und die Bedienung klar und strukturiert zu halten.

Inhaltsverzeichnis