Dialog: The most anticipated DOM element of 2022?October 29, 2021 -
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
<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