Which tool should I use?
- Reveal content in the normal page flow
<details>- Allow only one disclosure in a group
<details name=”…”>- Interrupt the page until the user responds
<dialog>withshowModal()- Show a non-blocking window
<dialog>withshow()- Show floating, non-modal content
popover- Toggle simple visibility only for presentation
- Consider CSS—but preserve semantics and keyboard access.
Helpful links
Details and summary
Dialog
- MDN:
<dialog> - web.dev: Building a dialog component
- WAI-ARIA Authoring Practices: Modal Dialog Pattern
- WHATWG HTML: The
dialogelement
Popover and invokers
Browser support
Vocabulary
Disclosure
A control that shows or hides a section of content in the document flow. <details> is a native disclosure.
Modal
A mode that prevents interaction with the rest of the page until it is dismissed. dialog.showModal() creates this behavior.
Non-modal
An interface that can remain open while the rest of the page is still interactive.
Top layer
A browser-managed rendering layer above ordinary document stacking contexts. Modal dialogs and shown popovers are placed there.
Light dismiss
Closing floating UI through an indirect action such as clicking outside it or pressing Escape.
Inert
Unavailable for interaction and removed from sequential focus navigation. The browser makes content outside a modal dialog inert while that dialog is open.
Invoker
A control—usually a button—that declaratively requests an action from another element.
Final checklist
Before replacing a custom component with native HTML, confirm that you have:
- Chosen the element whose semantics match the interaction
- Tested with keyboard-only input
- Preserved visible focus indicators
- Supplied clear labels and close controls
- Tested zoom, reflow, long content, and small screens
- Checked your supported browser matrix
- Kept a useful fallback for newer attributes
- Avoided duplicating native state with unnecessary ARIA and JavaScript