# Element “summary” is missing one or more of the following attributes: “aria-checked”, “aria-level”, “role”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-summary-is-missing-one-or-more-of-the-following-attributes-aria-checked-aria-level-role
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<!-- 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

```html
<!-- 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>`.