# The “dialog” role is unnecessary for element “dialog”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-dialog-role-is-unnecessary-for-element-dialog
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<dialog>` element was introduced to provide a native way to create modal and non-modal dialog boxes in HTML. As defined in the WHATWG HTML Living Standard and the ARIA in HTML specification, every `<dialog>` element automatically carries an implicit `dialog` role. This means assistive technologies like screen readers already recognize it as a dialog without any additional ARIA markup.

When you explicitly add `role="dialog"` to a `<dialog>` element, you're restating what the browser and assistive technologies already know. This violates the first rule of ARIA use: **do not use ARIA if you can use a native HTML element or attribute with the semantics already built in.** While this redundancy won't break functionality, it clutters your markup and signals to other developers (and validators) that the author may not understand the element's built-in semantics.

This principle applies broadly across HTML. Many elements have implicit ARIA roles — `<nav>` has `navigation`, `<main>` has `main`, `<button>` has `button`, and so on. Adding the matching role explicitly to any of these elements produces a similar validator warning.

## How to fix it

Simply remove the `role="dialog"` attribute from the `<dialog>` element. The built-in semantics handle everything automatically. If you need to provide additional context for assistive technologies, consider using `aria-label` or `aria-labelledby` to give the dialog a descriptive accessible name — that's genuinely useful supplementary information rather than a redundant role.

## Examples

### Incorrect: redundant `role` attribute

```html
<dialog role="dialog">
  <h2>Confirm action</h2>
  <p>Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</dialog>
```

This triggers the validator warning because `role="dialog"` duplicates the implicit role of the `<dialog>` element.

### Correct: relying on implicit semantics

```html
<dialog>
  <h2>Confirm action</h2>
  <p>Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</dialog>
```

### Correct: adding a descriptive accessible name

```html
<dialog aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm action</h2>
  <p>Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</dialog>
```

Using `aria-labelledby` to associate the dialog with its heading is a meaningful enhancement — it gives the dialog an accessible name that screen readers announce when the dialog opens. This is the kind of ARIA usage that genuinely improves accessibility, as opposed to redundantly restating the element's role.