HTML Guide for dialog

The dialog element does not require or permit a role="dialog" attribute according to HTML standards.

The <dialog> element has an implicit ARIA role of dialog, so adding role="dialog" is redundant and not valid per the specification. Instead, simply use the <dialog> element without an explicit role attribute.

Details:

According to the WHATWG HTML standard and ARIA specification, native <dialog> elements automatically have the correct role. Adding role="dialog" can cause HTML validation errors, as the validator interprets this as a misuse or redundancy.

Correct usage:

<dialog>
  <p>This is a dialog box.</p>
  <button>Close</button>
</dialog>

Incorrect usage (causes validation error):

<dialog role="dialog">
  <p>This is a dialog box.</p>
  <button>Close</button>
</dialog>

Removing the role="dialog" attribute resolves the W3C validation issue while maintaining accessibility.

The role="dialog" attribute is redundant when used on a <dialog> element because <dialog> has an implicit dialog role by default.

According to the WHATWG HTML living standard and ARIA in HTML, the <dialog> element already has the appropriate semantics for assistive technologies, so explicitly adding role="dialog" is unnecessary and causes warnings in validators.

Incorrect usage:

<dialog role="dialog">
  This is a dialog box.
</dialog>

Correct usage:

<dialog>
  This is a dialog box.
</dialog>

Simply remove the role attribute from the <dialog> element to resolve the warning.