Ein Overlay im HTML-Standard mit dialog und popover umsetzen

Früher gab es richtige Popups – Werbung und andere Dinge luden munter in neuen Fenstern, die sich dann über das aktuelle Browserfenster setzten. Je mehr sich in den Browsern aber Popup-Blocker verbreiteten, desto weniger genutzt wurden sie. Das ist super, denn barrierefrei waren diese Popups nicht. und nervig sowieso.

Doch Inhalte, die sich in neuen Fenstern öffnen sollen, gibt es deshalb trotzdem noch. Heutzutage spricht man auf einer Website von einem sogenannten Modal oder modalen Fenster, manchmal auch von einem Overlay, denn es öffnet sich über dem eigentlichen Inhalt der Seite. Dabei kann es sich um kleine Tooltips oder ganze Formulare handeln. Wir legen los mit einer kurzen Einführung, wie solche modalen Fenster mit dem HTML-Element dialog oder dem Attribut popover umgesetzt werden können. Was unterschiedet beide Varianten und wo liegen jeweils die Vor- und Nachteile?

Sind modale Fenster barrierefrei?

Wie immer in der Programmierung gilt: die Umsetzung macht den Unterschied. Modale Fenster sind per se nicht schlimm oder im Gegenteil automatisch barrierefrei. Vielmehr muss man sie richtig einsetzen. Dabei sind ganz grundsätzlich drei wichtige Regen zu beachten:

1. Auch Nutzer von Screenreadern müssen mitbekommen, dass es sich geöffnet hat.
2. Das Fenster sollte auch mit der Tastatur intuitiv wieder geschlossen werden können.
3. Nach dem Schließen ist der Nutzer wieder dort, wo er angefangen hat (oder, wo er erwartet zu sein).

Schauen wir uns die Anforderungen doch einmal genauer an.

Ein Overlay öffnen

Für sehende Nutzer sind die neuen Inhalte oft direkt ersichtlich. Sie öffnen sich entweder großflächig über dem Inhalt (bei größeren Dialogen) oder in unmittelbarer Umgebung des Mauszeigers (bei kleinen Tooltips). Nutzern von Screenreadern fehlen diese Informationen. Oft genug befinden sich die Overlays im Markup nicht direkt hinter dem Element, dass sie öffnet. Nutzer von Screenreadern bekommen das neu hinzugefügte oder geöffnete Element so nicht mit.

Um das zu verhindern, bieten sich zwei verschiedene Möglichkeiten an:

1. Kleinere Tooltips oder Fehlermeldungen können mit ARIA-Rollen und Attributen zu einer Live-Region gemacht werden und werden so unabhängig vom Fokus vorgelesen.
2. Der Fokus wird beim Öffnen an den Anfang des geöffneten Overlays gesetzt. Das sollten Sie immer dann tun, wenn Nutzer in dem Dialog arbeiten müssen. Müsen Dinge bestätigt werden oder wird sogar ein komplettes Formular abgefragt? Dann setzen Sie den Fokus in den Dialog hinein.

Ein Overlay schließen

Klar ist, was sich öffnet muss man auch wieder schließen können. Grundsätzlich bieten sich dabei folgende Möglichkeiten an:

• Das Overlay schließt sich nach einer gewissen Zeit von selbst. Für Nutzer ohne Einschränkung ist dieses Verhalten für kurze Hinweistexte zwar angenehm und erspart zusätzliche Interaktion, für Menschen mit Leseschwächen oder geringen Sprachkenntnissen wird es aber zum Problem. Denn sie brauchen oft länger zum Lesen von Texten und haben den Text deshalb womöglich noch nicht vollständig gelesen, wenn er schon wieder verschwindet. Deshalb sind Zeitbegrenzungen für wichtige Informationden dringend zu vermeiden.
• Das Overlay schließt sich, wenn die auslösende Aktion beendet wird. Öffnen sich kleine Tooltips bei Mouseover oder Tastaturfokus, also ungefragt, wäre es nicht sonderlich nutzerfreundlich, wenn der Nutzer sie umständlich wieder schließen müsste. Hier reicht es also sie dann zu schließen, wenn der Nutzer weiterzieht. Verlässt der Mauszeiger das auslösende Element oder springt der Fokus weiter, dann kann der Tooltip wieder geschlossen werden.
• Es existiert ein dedizierter Button zum Schließen. Sei es das Kreuz in der Ecke oder beschriftete Buttons, die eine Aktion bestätigen oder abbrechen: Buttons, die das Overlay schließen sind intuitiv verständlich und können von Nutzern bewusst ausgelöst werden, wenn Sie mit dem Lesen fert sind. Wichtig: Auch Icon-Buttons sollten eine Screenreadertaugliche Beschriftung besitzen.
• Der Dialog schließt sich beim Klick auf den Hintergrund. Das ist eine sehr komfortable Variante für Nutzer der Maus. Für die Tastaturbedienung kann man das Prinzip leicht abwandeln: Das Fenster schließt sich automatisch, wenn der Fokus auf ein Element außerhalb des Overlays gesetzt wird. So unkompliziert wie diese Methode insbesondere für Menschen mit schlechter Feinmotorik ist, ist sie doch nicht für jeden inutitiv verständlich. Nutzen Sie sie also nur als Ergänzung zum Button und nicht als alleinige Möglichkeit, ein Overlay zu schließen.

Kombinieren Sie also die für Ihr Element besten Optionen um Nutzern klar zu machen, wie Inhalte wieder geschlossen werden können. Bleiben Sie dann am Besten auf Ihrer gesamten Website bei einer Methode.

Und was tut man nun nach dem Schließen von Dialogen? Nunja, das hängt davon ab, wie sie geöffnet wurden. Sie haben sich für Variante 2 entschieden und der Fokus wurde in den Dialog gesetzt? Dann müssen Sie ihn nun wieder zurücksetzen. Fokussieren Sie deshalb nach dem Schließen des modalen Fensters den Button, der das Fenster geöffnet hat. So haben Nutzer, die das Fenster womöglich unabsichtlich geschlossen haben, die Möglichkeit es direkt wieder zu öffnen. Die anderen können an der Stelle weiterlesen, an der sie aufgehört haben.

Das HTML-Attribut popover

Nachdem wir jetzt wissen, worauf es ankommt, schauen wir uns einmal an, was der HTML-Standard uns an Komponenten anbietet, um ein modales Fenster bzw. ein barrierefreies Popup auf einer Website umzusetzen.

Zunächst gibt es die sogenannten Popover, sozusagen die Weiterentwicklung des Popups. Gedacht ist es vor allem für Overlays, die keine eigene Interaktion benötigen. Man kann es als kurzen Tooltip verwenden, als Fehlermeldung oder für Erklärungen eines Glossars. Wieso das so ist, schauen wir uns an einem kleinen Beispiel an.

<button popovertarget="ID">
  BUTTONTEXT
</button>
<div id="ID" popover>
  INHALT
</div>

Das ist der einfachste Aufbau eines Popovers. Um zu zeigen, weshalb es nicht ideal für interaktiven Inhalt ist, habe ich ein kleines Mini-Formular hinzugefügt. Was fält Ihnen auf? Richtig, beim Öffnen wird der Fokus nicht versetzt, er bleibt auf dem Button, der es auslöst. Ein ganzes Formular kann man nun aber auch nicht als Live-Region definieren. Der Nutzer würde so möglicherweise nicht mitbekommen, dass das Overlay sich geöffnet hat.

In diesem einfach Aufbau wird das Popover im sogenannten auto-Modus geöffnet. Man könnte diesen auch explizit mit popover="auto" definieren. Dadurch kann man das Overlay durch einen einfachen Klick in den hintergrund schließen. Per Tastatur reicht die Escape-Taste. Alternativ können Popovers als „manuell“ angelegt werden durch die Angabe von popover="manual". Hierdurch wird dem browser mitgeteilt, dass man sich selbst um das Schließen des Overlays kümmert, es muss also explizit ein Button angegeben werden.

<button 
    popovertarget="ID" 
    popovertargetaction="show" >
  BUTTONTEXT
</button>
<div id="ID" popover="manual">
  INHALT
  <button 
      popovertarget="ID"
      popovertargetaction="hide" >
    BUTTONTEXT ZUM SCHLIESSEN
  </button>
</div>

Testen Sie es einmal aus. Mit dem Attribut popovertargetaction wurde beiden Buttons mitgeteilt, welche Aktion sie durchführen sollen. Standardmäßig schaltet ein Button zwischen sichtbar und unsichtbar einfach hin und her. Auch die Escape-Taste funktioniert für diese Art Popovers nicht. Nutzen Sie diese Funktion also nur, wenn Sie sicher gehen wollen, dass ein Nutzer das Overlay nicht ungewollt schließen kann. Beachten Sie aber: obwohl sich das modale Fenster nicht automatisch schließt, wenn man in den Hintergrund klickt, bleiben alle interaktiven Elemente verfügbar. Ein Klick auf einen Link wechselt also trotzdem die Seite.

Da unsere Overlays zur Zeit noch ziemlich unschön aussehen, fügen wir zum Schluss noch ein wenig CSS hinzu. Mithilfer der Pseudoklasse :popover-open können alle offenen Popover angesprochen werden. Das Pseudoelement ::backdrop spricht den umliegenden Hintergrund an und ermöglicht es so, die restliche Seite farblich zu überlagern und mit einem Blur-Filter etwas unscharf zu machen. Dadurch wird das eigentliche Overlay noch sichtbarer.

Will man das Erscheinen des Overlays animieren, braucht es die Regel @starting-style, da eine Animation heraus aus einem display: none sonst nicht möglich ist.

:popover-open {
  padding: 2rem;
  transition: opacity 0.5s;
  opacity: 1;
  border: 2px dotted orange;
  background: white;

  &::backdrop {
    backdrop-filter: blur(3px);
    background: rgba(0,0,0,0.3);
    transition: opacity 0.5s;
    opacity: 1;
  }

  @starting-style {
    opacity: 0;

    &::backdrop {
      opacity: 0;
    }
  }
}

Um den z-index, also die Ebene in der ein Popover dargestellt wird, muss man sich übrigens nicht kümmern. Popover erscheinen automatisch auf der höchsten Ebene und somit über jedem anderen Inhalt. Neue Popover werden dabei immer vor älteren eingeblendet und können sich so durchaus stapeln. Einen Einfluss auf die Reihenfolge hat man aber nicht.

Sie wollen noch mehr über popover wissen? Mehr Informationen zum Attribut (auf Englisch) gibt es bei MDN.

DAS HTML-Element dialog

Die Zweite Möglichkeit, ein Overlay mit den Bordmitteln von HTML und ein wenig JavaScript zu erstellen, ist das Element <dialog>. Das modale Fenster wird dabei als Dialog definiert, um die Funktionialität des Öffnes muss man sich aber im Gegensatz zu den Popovers selbst können. Dazu dient die HTMLDialogElement-API.

Schauen wir uns noch einmal das erste Beispiel von oben an und nutzen dieses Mal das HTML-Element <dialog>.

<button id="button-open-dialog">
  BUTTONTEXT
</button>
<dialog id="dialog">
  INHALT
  <button id="button-close-dialog">
    BUTTONTEXT ZUM SCHLIESSEN
  </button>
</dialog>

<script>
  const dialog = document.querySelector("#dialog");
  const showButton = document.querySelector("#button-open-dialog");
  const closeButton = document.querySelector("#button-close-dialog");

  showButton?.addEventListener("click", () => {
    dialog?.showModal();
  });

  closeButton?.addEventListener("click", () => {
    dialog?.close();
  });
</script>

Es fallen sofort einige Unterschiede zwischen Popover und Dialog auf. Zum Einen wird der Fokus beim Dialog direkt auf das erste fokussierbare Element, hier unsere Auswahlbox, gesetzt. Schließt man den Dialog wieder, so wandert der Fokus direkt wieder zurück zu dem Button, der den Dialog geöffnet hat. Ein großer Vorteil zum Popover.

Eine Funktion, die der Dialog im Gegensatz zum Popover allerdings nicht besitzt ist, ihn mit einem Klick auf den Hintergrund wieder zu schließen. Darum muss man sich bei Bedarf selbst kümmern. Dafür werden bei der Nutzung von Dialogen auch alle Elemente außerhalb des Dialogs deaktiviert. Man sieht: ein Dialog sollte immer dann verwendet werden, wenn vom Nutzer wichtige Entscheidungen zu treffen sind.

Geben wir nun auch unserem Dialog noch ein wenig CSS mit um es etwas attraktiver zu gestalten.

dialog:modal {
  padding: 2rem;
  transition: opacity 0.5s;
  opacity: 1;
  border: 2px dotted orange;
  background: white;

  &::backdrop {
    backdrop-filter: blur(3px);
    background: rgba(0,0,0,0.3);
    transition: opacity 0.5s;
    opacity: 1;
  }

  @starting-style {
    opacity: 0;

    &::backdrop {
      opacity: 0;
    }
  }
}

Mehr Informationen zum dialog-Element auf Englisch gibt es bei MDN. Denn das war nur ein kurzer Abriss der Möglichkeiten, die das Element bietet.

Fazit – popover und dialog haben beide ihren Platz

Sie sehen, mit dem HTML-Attribut popover und dem HTML-Element dialog und dem dazugehörigen CSS und JavaScript lassen sich unkompliziert modale Fenster für unterschiedliche Anwendungen erstellen. Von Fehlermeldungen und Hinweistexten bis hin zu komplexen Formularen ist vieles denkbar. Mit ein wenig Extra-CSS und der aktuell noch nicht vollständig unterstützten Anchor-API sind auch Inline-Tooltips möglich. Testen Sie doch einmal diese Elemente aus und lösen Sie ihre alten div ab. Nutzer von Screenreadern werden es Ihnen danken.