HTML Guides for aria-level

The aria-expanded attribute cannot be used on a plain div element without also specifying a role attribute.

The aria-expanded attribute indicates whether a grouping of content that the element owns or controls is currently expanded or collapsed. However, this attribute is only valid on elements that have an appropriate implicit or explicit role. A plain div has no implicit ARIA role, so you must assign one explicitly.

The aria-expanded attribute is commonly used with interactive roles such as button, combobox, treeitem, or link. Adding the correct role tells assistive technologies what kind of element the user is interacting with, making aria-expanded meaningful in context.

HTML Examples

❌ Invalid: aria-expanded on a plain div

<divaria-expanded="false">

Menu content

</div>

✅ Valid: aria-expanded with an appropriate role

<divrole="button"aria-expanded="false">

Menu content

</div>

Alternatively, consider using a native HTML element that already carries the correct semantics, which avoids the need for a role attribute entirely:

<buttonaria-expanded="false">

Toggle Menu

</button>

Using a native <button> is generally preferred over <div role="button"> because it comes with built-in keyboard interaction and focus behavior.

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>

<summaryrole="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>

<summaryrole="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>.