HTML Guides for aria-level

The summary element needs an explicit role attribute when the W3C validator detects it’s being used in a context where its implicit ARIA semantics are unclear or overridden.

The summary element is designed to be used as the first child of a <details> element, where it acts as a clickable disclosure toggle. When used correctly inside <details>, it has an implicit ARIA role and doesn’t need additional attributes.

This validation warning typically appears when:

• The summary element is used outside of a <details> element.
• The summary element has an explicit role attribute that requires additional ARIA properties (e.g., role="checkbox" requires aria-checked, or role="heading" requires aria-level).

The simplest fix is to ensure summary is used correctly as a direct child of <details>, and to remove any unnecessary or conflicting role attributes.

Example with the issue

<!-- summary outside of details triggers the warning -->

<summary>Click to expand</summary>
<p>Some content here.</p>

<!-- Or summary with an incomplete role override -->

<details>
  <summary role="heading">Section Title</summary>
  <p>Some content here.</p>
</details>

How to fix it

<!-- Use summary correctly inside details -->

<details>
  <summary>Click to expand</summary>
  <p>Some content here.</p>
</details>

<!-- If you need a heading role, include the required aria-level -->

<details>
  <summary role="heading" aria-level="3">Section Title</summary>
  <p>Some content here.</p>
</details>

If you don’t have a specific reason to override the role, simply remove the role attribute and let the summary element keep its native semantics within <details>.