# Element “div” is missing one or more of the following attributes: “aria-checked”, “aria-level”, “role”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-div-is-missing-one-or-more-of-the-following-attributes-aria-checked-aria-level-role
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-expanded` attribute cannot be used on a plain `div` element without also specifying a `role` attribute.

The `aria-expanded` attribute indicates whether a grouping of content that the element owns or controls is currently expanded or collapsed. However, this attribute is only valid on elements that have an appropriate implicit or explicit role. A plain `div` has no implicit ARIA role, so you must assign one explicitly.

The `aria-expanded` attribute is commonly used with interactive roles such as `button`, `combobox`, `treeitem`, or `link`. Adding the correct `role` tells assistive technologies what kind of element the user is interacting with, making `aria-expanded` meaningful in context.

## HTML Examples

### ❌ Invalid: `aria-expanded` on a plain `div`

```html
<div aria-expanded="false">
  Menu content
</div>
```

### ✅ Valid: `aria-expanded` with an appropriate `role`

```html
<div role="button" aria-expanded="false">
  Menu content
</div>
```

Alternatively, consider using a native HTML element that already carries the correct semantics, which avoids the need for a `role` attribute entirely:

```html
<button aria-expanded="false">
  Toggle Menu
</button>
```

Using a native `<button>` is generally preferred over `<div role="button">` because it comes with built-in keyboard interaction and focus behavior.
