# Bad value “dialog” for attribute “role” on element “aside”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-dialog-for-attribute-role-on-element-aside
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `role="dialog"` attribute is not allowed on an `<aside>` element, because `<aside>` already carries the implicit role `complementary` and the spec does not list `dialog` among the roles you can override it with.

ARIA in HTML defines, element by element, which roles are valid. The `<aside>` element represents content tangentially related to its surroundings, like a sidebar or a pull quote, and assistive technology exposes it as a complementary region. A dialog is a different thing entirely: a window layered over the page that the user interacts with before returning to the rest of the content. Putting one role's name on an element built for the other leaves the validator no good way to reconcile them, so it rejects the value.

What you almost certainly want is a real dialog. The `<dialog>` element already has an implicit `dialog` role, handles focus and the backdrop for you, and can be opened as a modal with `showModal()`. Reach for it first. If you genuinely need to bolt the role onto a generic container, a `<div role="dialog">` is valid where `<aside>` is not.

## Invalid example

```html
<aside role="dialog" aria-label="Newsletter signup">
  <p>Subscribe to get our weekly updates.</p>
  <button>Subscribe</button>
</aside>
```

## Valid example

```html
<dialog aria-label="Newsletter signup">
  <p>Subscribe to get our weekly updates.</p>
  <button>Subscribe</button>
</dialog>
```

If a native `<dialog>` does not fit your markup, a generic container accepts the role:

```html
<div role="dialog" aria-label="Newsletter signup">
  <p>Subscribe to get our weekly updates.</p>
  <button>Subscribe</button>
</div>
```