Dialoge

Screenshot eines beispielhaften modalen Cookiedialogs. Text: 'Wir nutzen Cookies. Hier steht ein juristisch ausgefeilter Text, den keiner liest. Stattdessen wird der Dialog schnell weggeklickt.'.

So genannte Dialoge, Lightboxes oder „modale Fenster“ sind ein übliches Element in Online-Shops und darüber hinaus in Benutzeroberflächen aller Art. Aber so häufig wie sie gerade im Web in Cookie-Kontexten im Einsatz sind, so häufig werden sie falsch gebaut. Durch grafische Präsentation wird meist eine wichtige, die Oberfläche blockierende und damit modale Meldung vermittelt, allerdings findet sich das meist nicht semantisch und non-visuell im Code (HTML) wieder. Auch das von Dialogen erwartete Tastaturverhalten ist häufig nicht umgesetzt: So verbleibt der Fokus meist auf dem ihn auslösendem Element (z. B. einer Schaltfläche) und wird nicht in den Dialog versetzt und dort in ihm „gefangen“. Wenn man davon ausgehen kann, dass der Tastaturfokus beim Öffnen nicht in oder auf den Dialog versetzt wird, kann man sich recht sicher sein, dass er beim Dialog-Schließen nicht wieder zurück zum Auslöser wandert.

Glücklicherweise lässt sich seit etwa 2022 sagen, dass das native HTML-Element <dialog> all diese Aufgaben in modernen Browsern übernimmt (wir erinnern uns an die erste ARIA-Regel aus dem Basics-Modul zurück). Es kommuniziert zum einen, dass es ein Dialog, zum anderen, ob es „modal“ (das heißt: blockierend) ist oder nicht. Gleichzeitig übernimmt es das nötige Tastaturmanagement.

Per JavaScript ist der Einsatz und das Öffnen eines Dialogs vergleichsweise leicht:

<dialog id="wichtig">
	<button>Schließen</button>
	<p>Wichtige Infos</p>
</dialog>
const dialog = document.querySelector('#wichtig');

// Im Falle eines Events, z. B. Buttonklick
dialog.showModal();

Wichtig: Die Methode .show() öffnet nicht-modale Dialoge – die aber in freier Wildbahn vergleichsweise selten vorkommen. Möchte man einen Dialog modal/das Interface blockierend initiieren, greift man zu .showModal(). Gibt man dem Dialog das Attribut open, so startet er von Anfang an geöffnet.

Möchte man einen modalen Dialog wieder schließen, gibt es dazu mehrere Optionen: Entweder über die sinnvoll genannte .close()-JavaScript-Methode per – oder sogar rein über HTML:

<dialog open>
<p>Wichtige Infos</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Gibt es mehrere Buttons im Dialog, aber nicht alle Schaltflächen sollen ihn auch schließen, vergibt man dem Schalter mit Schließen-Funktion das Attribut-Wertpaar formmethod="dialog": 

<dialog open>
	<p>Wichtige Infos</p>
	<form>
		<!-- Ein Klick auf den folgenden Button schließt nicht allein den Dialog, sondern setzt auch Cookies. -->
		<button>Cookies akzeptieren</button>
		
		<!-- Dieser Button schließt ausschließlich den Dialog -->
		<button formmethod="dialog">Ablehnen</button>
	</form>
</dialog>

Sehr häufig ergibt es sehr viel Sinn, einem Dialog einen Namen zu geben. Im Falle einer ohnehin sichtbaren Überschrift kann das folgendermaßen mit dem Attribut aria-labelledby geschehen: Hat ein Element dieses ARIA-Attribut, gibt es an, dass es seinen programmatischen Namen von einem anderen Namen bekommt, in dem es auf seine ID „zeigt“:

<dialog aria-labelledby="dialogtitle">
	<h1 id="dialogtitle">Unsere Cookies</h1>
	<p>Wichtige Infos</p>
</dialog>

Die Browserunterstützung für das Dialog-Element lässt sich der passenden Caniuse-Seite entnehmen. Muss das Projekt dennoch ältere Browser wie den Internet Explorer 11 unterstützen, bietet sich das Projekt a11y-dialog an. Im Falle von modalen Dialogen sorgt dann das Attribut-Wertpaar aria-modal="true" dafür, dass alles außer dem Dialog-Element als für Screenreader deaktiviert markiert wird. Gleichzeitig löst die a11y-dialog-Bibliothek dies auch ein Beschränken des Fokus' auf den offenen Dialog per JavaScript ein.

Auf ecbf.shop finden sich Dialog-Beispielimplementationen in Form des Cookie-Dialogs und in Form des Warenkorb-Unterfensters. Beide Dialoge wurden modal gestartet und gestaltet.

Übungen

Das <dialog>-Element ist als „einsatzbereit“ zu betrachten. Es kommuniziert die nötigen semantischen Rollen, Zustände und implementiert ein Fokusmanagement, wie man es von Dialogen erwartet.

Wahr oder falsch: Man kann einen offenen <dialog> nur per JavaScript schließen.

Was heißt „modal“ im Zusammenhang mit Dialogen?


Zusammenfassung
  • Dialoge sind unter vielen Namen bekannt: Popup, Lightboxes, Unterfenster etc.
  • Dialoge sind sehr weit verbreitet, z. B. häufig als Cookie-Dialoge zu finden: Ihr Ziel als Interface-Muster ist es häufig, eine wichtige Information oder Funktion zu kommunizieren oder eine Entscheidung zu erzwingen.
  • Dialoge sind häufig „modal“, das heißt ungefähr „das Interface blockierend“. Wenn es eine Abdunkelung hinter dem Dialog oder dieses „Backdrop“ gar Klicks unterdrückt, hat der Dialog modalen Charakter.
  • Modale Dialoge benötigen ein besonderes Fokusmanagement:
    1. Öffnet man den Dialog, so muss der Tastaturfokus vom Dialog-Auslöser (häufig eine Schaltfläche) in den Dialog versetzt werden.
    2. Ist er offen, muss der Fokus in dem Dialog „gefangen“ sein, das heißt: Ein Fokussieren des „hinter“ dem Dialog liegenden Interfaces muss vermieden werden.
    3. Schließt der Dialog, so muss der Fokus wieder auf das auslösende Element (häufig eine Schaltfläche) versetzt werden.
  • Bis vor kurzem war eine zugängliche und kompatible Implementierung von (modalen) Dialogen nur mit kleinteiligen und recht manuellen ARIA-Mustern möglich. Neuerdings gibt es aber das native <dialog>-HTML-Dokument, dass fast alle nötigen Schritte dem Browser überlässt. Mit der JavaScript-Anweisung dialogElement.showModal() kann ein Dialog modal gestartet werden.