The Short Answer: No

You do not need to manually add aria-expanded to native <details> and <summary> elements. Browsers automatically communicate the open/closed state to assistive technologies like screen readers through the native open attribute. Adding manual ARIA attributes here is redundant and violates core accessibility guidelines.

Why Native HTML Beats Manual ARIA

The first rule of ARIA design patterns states: If you can use a native HTML element with the semantics and behavior you require already built-in, then do so rather than re-purposing an element and adding ARIA.

When you use <details> and <summary>, accessibility engines handle everything for you:

  • Role Mapping: The browser automatically treats <summary> as a button/disclosure trigger.
  • State Communication: When the open attribute is toggled on <details>, screen readers announce the expanded or collapsed state dynamically.
  • Keyboard Navigation: Native keyboard interaction (Enter and Space key support) works out of the box.

The Real Problem: HTML Structure Flaw

While aria-expanded isn't needed, there is a critical accessibility bug in how the HTML is structured when content is placed outside the <details> tag:

<!-- Broken Accessibility Pattern -->
<details name="my-group">
  <summary>Utility menu</summary>
</details>
<div><!-- Menu content outside details --></div>

Placing the revealed content outside the <details> element breaks native semantics. Screen readers will treat the <details> element as an empty disclosure container, meaning screen reader users will not know that the adjacent <div> is controlled by or associated with the summary trigger.

The WCAG-Compliant, No-JavaScript Solution

To ensure 100% WCAG and ADA compliance without writing any JavaScript, nest your expandable content inside the <details> tag. Browsers automatically handle hiding and showing the content without requiring custom CSS display properties.

<!-- Correct, fully accessible HTML -->
<details name="my-group">
  <summary>Utility menu</summary>
  <div class="menu-content">
    <a href="#profile">Profile</a>
    <a href="#settings">Settings</a>
    <a href="#logout">Logout</a>
  </div>
</details>

If you need custom styling for when the menu is open, rely on the native [open] attribute in CSS:

/* Optional custom styling for open state */
details[open] .menu-content {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Key Takeaways

  • Avoid Redundancy: Never add aria-expanded manually to native <summary> tags.
  • Keep Content Nested: All controlled disclosure content must reside inside the <details> tag.
  • Zero JS Required: Standard native elements satisfy WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value) automatically.