Dialoge in nativem HTML realisieren

HTML 5.2: Das <dialog>-Element in W3C-Recommendation aufgenommen
Keine Kommentare

HTML 5.2 ist die neue Recommendation des W3C. Enthalten ist auch das <dialog>-Element, das seit der Bekanntgabe der neuen Recommendation diskutiert wird. Woran liegt das?

Im Dezember erklärte das W3C HTML 5.2 zur Recommendation und damit zum Standard. Mit dabei ist auch das <dialog>-Element, das bereits seit einiger Zeit bekannt ist, bisher jedoch nicht zum Standard gehörte. Die Entwickler-Community hat dieses Element in den letzten Tagen breit diskutiert. Worum geht es genau?

Das dialog-Element in HTML5

Das <dialog>-Element in HTML 5.2 ist dazu da, Dialog-Fenster im Browser zu erzeugen – so viel verrät ja schon der Name. Auf Codepen wird die Grundfunktion es Elements in einer sehr einfachen Form illustriert: Die native Realisierung von Dialog-Boxen in HTML. Wie Ire Aderinokun schreibt, soll diese Implementierung das Problem der Accessibility lösen, das bisher häufig im Kontext von Dialogboxen aufgetreten ist. So seien diese Elemente bisher meist nicht gut mit Screenreadern oder einer rein Tastatur-basierten Steuerung nutzbar gewesen, weil kein Standard dafür definiert war.

Das <dialog>-Element ist allerdings nicht gänzlich neu: Bereits bis 2009 gab es eine entsprechende Option in HTML, die zwischenzeitlich jedoch nicht verfügbar war. Mit dem überarbeiteten <dialog>-Element, das erst mit HTML 5 wieder eingeführt wurde, soll es jetzt aber möglich sein, Dialogboxen zu erstellen, die nativ mit unterstützenden Technologien wie Screenreadern kompatibel sind.

Schlechter Browser-Support

Die gegenwärtige Neuerung besteht darin, dass das <dialog>-Element nun in den Standard aufgenommen wurde. Auch die neue Implementierung ist nämlich schon ein paar Jahre alt. Ein Blick auf den Browser-Support zeigt, dass das Element bereits seit 2014 in Chrome unterstützt wird. Auch die Implementierung für Opera ist nicht neu; danach endet der gegenwärtige Browser-Support aber bald. In Firefox befindet sich das <dialog>-Element im Feature-Flag-Status. Ansonsten sind es vor allem mobile Browser für Android, die die Sprachversion unterstützen. Insgesamt zeigt sich also, dass der Support für das HTML-Element in vielen Browsern noch fehlt. Darunter sind beispielsweise Edge und Safari.

Allerdings weist Keith J. Grant darauf hin, dass Entwickler hier mit einem Polyfill arbeiten können. Diese Lösung wird laut GitHub-Page des Projekts von allen modernen Browsern sowie dem Internet Explorer ab Version 9 unterstützt.

Kritik am Element

Im Netz findet sich allerdings auch Kritik am neuen HTML-Element, die sich nicht auf den fehlenden Browser-Support bezieht: Einen Kritikpunkt am neuen HTML-Element benennt Bram Van Damme:

[…]Now, say you want to open a modal via JavaScript you don’t call modal.open(), but you have have to call modal.showModal(). Why not open (like the attribute) but show as the verb? And why the Modal suffix?[…]

Bezüglich der Adaption des neuen HTML-Elements weist Kenan Yusuf außerdem darauf hin, dass bereits zahlreiche andere Lösungen in Hinblick auf die Accessibility zur Verfügung stehen. So bringe beispielsweise Bootstrap eine Implementierung für Dialog-Elemente mit, die ebenfalls barrierefrei gestaltet werden könne. Auch gebe es bereits Projekte im Netz, die eigene Libraries für dieses Problem entwickelt haben. Als Beispiel dafür nennt er A11y Dialog von Edenspiekermann.

Im Blog von Kenan Yusuf ist daneben aber auch ein umfassendes Beispiel für die Nutzung des <dialog>-Elements zu finden, das auch das Styling des Elements mit CSS und JavaScript umfasst. Ein weiteres, simples Beispiel für eine Dialogbox mit Formular-Inhalt gibt es in den MDN Web Docs.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -