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

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

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

Correct Example

<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:

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

Learn more:

MDN Reference

Using the summary element

→

MDN Reference

ARIA states and properties: aria-expanded

→

WHATWG Spec

Interactive elements

→