# The “aria-expanded” attribute must not be used on any “summary” element that is a summary for its parent “details” element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-expanded-attribute-must-not-be-used-on-any-summary-element-that-is-a-summary-for-its-parent-details-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-expanded` attribute is redundant on a `summary` element when it is the direct child of a `details` element, because the browser already communicates the expanded/collapsed state through the native `open` attribute on `details`.

The `summary` element, when used as the first child of a `details` element, acts as the built-in toggle control. Assistive technologies already understand this relationship and automatically convey whether the disclosure widget is open or closed based on the `details` element's `open` attribute. Adding `aria-expanded` to `summary` in this context creates duplicate semantics, which can confuse screen readers by announcing the state twice.

If you're using JavaScript to toggle `aria-expanded` manually, you can safely remove it and rely on the native behavior instead. The `details`/`summary` pattern is one of the best examples of built-in accessibility that requires no extra ARIA attributes.

## Incorrect Example

```html
<details>
  <summary aria-expanded="false">More information</summary>
  <p>Here are the additional details.</p>
</details>
```

## Correct Example

```html
<details>
  <summary>More information</summary>
  <p>Here are the additional details.</p>
</details>
```

If you need the section to be open by default, use the `open` attribute on the `details` element:

```html
<details open>
  <summary>More information</summary>
  <p>Here are the additional details.</p>
</details>
```