The <dialog> element

You know what a dialog is, even if you know it by a different name. It’s the pop-up you get on a site asking you to subscribe to a newsletter, or log in to a service. Coding this kind of thing has always been problematic. Worse still, if you didn’t think they were problematic it is likely because you didn’t realize there were accessibility problems with your implementation. It’s likely users using only a keyboard could struggle to get focus into the dialog or be unable to leave it.

Thankfully, we now have a specific element to handle these use cases. In the code for this chapter, you will want to consider example_02-05.html.

Inside that HTML file is also the relevant CSS and JavaScript to produce a simple but fully working dialog.

When the modal dialog is opened, it automatically gets centered, focused, and the backdrop of the dialog — which is automatically inserted — covers everything below, preventing...