This element includes the global attributes.

Warning: The tabindex attribute must not be used on the

element.

open

Indicates that the dialog is active and can be interacted with. When the open attribute is not set, the dialog shouldn’t be shown to the user.
It is recommended to use the .show() or .showModal() methods to render dialogs, rather than the open attribute. If a

is opened using the open attribute, it will be non-modal.

The native HTML

element should be used in creating modal dialogs as it provides usability and accessibility features that must be replicated if using other elements for a similar purpose. Use the appropriate .showModal() or .show() method to render dialogs. If creating a custom dialog implementation, ensure all expected default behaviors are supported and proper labeling recommendations are followed.

When implementing a dialog, it is important to consider the most appropriate place to set user focus. Explicitly indicating the initial focus placement by use of the autofocus attribute will help ensure initial focus is set to the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog’s content is dynamically rendered when invoked, then if necessary authors may decide focusing the

element itself would provide the best initial focus placement. When using HTMLDialogElement.showModal() to open a

, focus is set on the first nested focusable element.

Ensure a mechanism is provided to allow users to close a dialog. The most robust way to ensure all users can close a dialog is to include an explicit button to do so. For instance, a confirmation, cancel or close button as appropriate. Additionally, for those using a device with a keyboard, the Escape key is commonly expected to close modal dialogs as well. By default, a

invoked by the showModal() method will allow for its dismissal by the Escape. A non-modal dialog does not dismiss via the Escape key by default, and depending on what the non-modal dialog represents, it may not be desired for this behavior. If multiple modal dialogs are open, Escape should only close the last shown dialog. When using

, this behavior is provided by the browser.

The

element is exposed by browsers similarly to custom dialogs using the ARIA role=”dialog” attribute.

elements invoked by the showModal() method will have an implicit aria-modal=”true”, whereas

elements invoked by the show() method, or rendered by use of the open attribute or changing the default display of a

will be exposed as [aria-modal="false"]. When implementing modal dialogs, everything other than the

and its contents should be rendered inert using the inert attribute. When using

along with the HTMLDialogElement.showModal() method, this behavior is provided by the browser.

• 
  

  elements can close a

  if they have the attribute method="dialog" or if the button used to submit the form has formmethod="dialog" set. In this case, the state of the form controls are saved, not submitted, the
  closes, and the returnValue property gets set to the value of the button that was used to save the form’s state.
• The ::backdrop CSS pseudo-element can be used to style the bac