Dialog: The most anticipated DOM element of 2022?

One of the most exciting upcoming HTML primitives that’s being developed right now is the <dialog> element – this will create a native version of the pattern we know as modals or popups.

Modals are notoriously annoying and difficult to have be accessible. Let’s imagine we have a modal that is triggered by a button click (rather than infuriatingly interrupting you) – Now that it’s open we might ask, “where is the keyboard focus?” – this is a critical matter for keyboard navigators and screen readers! Also, how is the modal being announced by the screenreader; is it totally disjointing and confusing? After closing the modal you can likewise wonder “now where is the keyboard focus?!” did it go back? We can imagine if a harried developer is writing it all by scratch consideration and restoration of focus are really easy to miss.

Like with other somewhat complex HTML objects (e.g. native vs. custom <select> is a perfect example) having a stock HTML primitive for modals is going to be awesome – with different customized user experiences on different devices. Currently support is still missing on a few key browsers (https://caniuse.com/?search=dialog – imo IE11 should be buried on this list under “other” or something, even MS doesn’t support it on their sites). I bet we’ll be seeing this in the next year.

Similarly we have <details> and <summary> for replicating accordions which I still have only used a couple times https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Categorized in: HTML

This post was written by ArleyM