HTML Dialog Element, Popover and inert: A Clear Guide (2026)

Quick answer: The HTML dialog element, the popover attribute and inert replace a lot of custom JavaScript. <dialog> gives you an accessible modal with focus trapping, the popover attribute toggles a lightweight overlay with no script, and inert removes a region from interaction and the accessibility tree at once. Use them before writing your own modal library.

The HTML dialog element

A proper modal needs focus trapping, an escape-to-close behaviour, a backdrop and correct ARIA roles. The <dialog> element provides all of them.

<dialog id="confirm">
  <h2>Delete this item?</h2>
  <p>This cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<button onclick="document.getElementById('confirm').showModal()">
  Delete item
</button>

• showModal() — opens a modal: focus moves inside, the rest of the page is blocked, and Escape closes it.
• show() — opens non-modally, so the rest of the page stays usable.
• close() — closes it programmatically.
• <form method="dialog"> — submitting closes the dialog and returns the button’s value, which is a neat way to read the user’s choice.

const dlg = document.getElementById("confirm");
dlg.addEventListener("close", () => {
  if (dlg.returnValue === "confirm") deleteItem();
});

The HTML dialog element and the popover attribute

A popover is a lightweight overlay — a menu, a tooltip, a small palette — that does not block the page.

You connect a button to it with popovertarget, and the browser handles toggling and light dismiss.

<button popovertarget="menu">Options</button>
<div id="menu" popover>
  <ul>
    <li><button>Rename</button></li>
    <li><button>Duplicate</button></li>
  </ul>
</div>

Mode	Behaviour
popover="auto"	Closes when you click outside; only one open at a time
popover="manual"	Stays open until closed in code
popover="hint"	For hints; does not close other auto popovers

Choose a dialog for a decision that must be answered — a confirmation, a form — and a popover for optional, dismissible content. A dialog blocks the page; a popover does not.

inert for background content

When a menu or drawer is open, the content behind it should not be reachable by keyboard or screen reader. The inert attribute does exactly that, and it is the correct tool instead of a fragile CSS trick.

<main id="page">...</main>
<div id="drawer">...</div>

<script>
function openDrawer() {
  document.getElementById("page").inert = true;   // background unusable
  drawer.hidden = false;
}
function closeDrawer() {
  document.getElementById("page").inert = false;
  drawer.hidden = true;
}
</script>

Before inert, developers faked this with tabindex="-1" on every child or with aria-hidden, both of which are easy to get wrong. One attribute now does the job, and it removes the region from the accessibility tree as well as from keyboard focus.

Why the HTML dialog element matters

Every hand-rolled modal reproduces these behaviours badly: focus escapes to the page behind, Escape does not close it, or a screen reader reads hidden content. The native elements have been tested by every browser and assistive technology vendor. Reaching for them first is not just less code, it is more correct.

That completes the HTML series. To learn HTML, CSS and JavaScript with a mentor, Ampersand Academy teaches web development one-to-one.

Frequently asked questions