Popup-Boxen

[1UnitedPower]

Hakuna matata!

** Würdet ihr das dialog-Element schon nutzen?

Unbedingt, aus mehreren Gründen:

<dialog> ist das semantisch passende Element, das macht den Quelltext besonders ausdrucksstark und leserlich – für Menschen, wie für Maschinen.

Weiterhin hat das <dialog>-Element implizite ARIA-Rollen und -Zustände. Assistive Software sucht nach solchen Zusatzinformationen, um seinen Anwendern die best mögliche Darstellung anzubieten.

JavaScript-Lösungen von Drittanbietern werden meistens für bestimmte Bibliotheken, wie jQuery oder AngularJS geschrieben. Das hat den Nachteil, dass die Lösungen in anderen Umgebungen nicht wiederverwendbar sind. Eine AngularJS-Komponente kann nicht ohne weiteres in EmberJS eingebettet werden. <dialog> allerdings gehört zum Standard-Umfang des DOM. Jedes clientseitige JavaScript-Framework ist damit verträglich und bietet eine Schnittstelle an, um DOM-APIs zu konsumieren.

Die mangelnde Browser-Unterstützung sollte kein Hindernis sein. Mit einem Polyfill lässt sich das Verhalten für alle relevanten Browser nachrüsten.

***Gibt es dafür Alternativen?

Es gibt Leute, die basteln reine CSS-Lösungen für modale Dialoge, die ohne JavaScript auskommen. Ich sehe das ganze eher als proof-of-concept oder als nettes Fallback für den Fall, das kein JavaScript aktiviert ist. Die Nachteile von reinen CSS-Lösungen sind eben mangelnde Flexibilität und vor allem mangelhafte Zugänglichkeit.