# Bad value X for attribute “aria-expanded” on element “div”.

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

The `aria-expanded` attribute only accepts the values `"true"`, `"false"`, or `"undefined"`, and it belongs on interactive elements, not on generic `div` elements.

The `aria-expanded` attribute indicates whether a grouping element controlled by the current element is expanded or collapsed. Valid values are `"true"` (the controlled element is expanded), `"false"` (the controlled element is collapsed), and `"undefined"` (the element does not own or control a groupable element). Any other value, such as `"yes"`, `"no"`, `"0"`, `"1"`, or an empty string, is invalid.

Beyond the attribute value itself, `aria-expanded` is meant for interactive elements like `button`, `a` (with `href`), or elements with an appropriate ARIA role such as `role="button"`. A plain `div` has no implicit interactivity, so placing `aria-expanded` on it without an interactive role triggers a validation warning.

To fix this, use a valid value and place the attribute on an appropriate element. If you must use a `div`, give it an interactive role and make it keyboard accessible with `tabindex`.

## Examples

### Invalid usage

```html
<div aria-expanded="yes">
  <p>Panel content</p>
</div>
```

Two problems here: the value `"yes"` is not valid, and a plain `div` is not an interactive element.

### Valid usage

```html
<button aria-expanded="false" aria-controls="panel1">
  Toggle panel
</button>
<div id="panel1" hidden>
  <p>Panel content</p>
</div>
```

The `aria-expanded="false"` attribute sits on a `button`, which is interactive by default, and the value is one of the allowed strings. When the panel opens, update the attribute to `"true"` and remove the `hidden` attribute via JavaScript.