# The “button” role is unnecessary for element “summary”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-button-role-is-unnecessary-for-element-summary
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<summary>` element serves as the clickable disclosure toggle for a `<details>` element. Because its built-in behavior is inherently interactive — clicking it expands or collapses the parent `<details>` content — the HTML specification assigns it an implicit `button` role. This means assistive technologies like screen readers already announce `<summary>` as a button without any additional markup.

When you explicitly add `role="button"` to a `<summary>` element, the W3C validator flags it as unnecessary. While this doesn't cause functional problems, redundant ARIA roles are discouraged by the [first rule of ARIA use](https://www.w3.org/TR/using-aria/#firstrule): if an HTML element already has the semantics you need, don't re-add them with ARIA attributes. Redundant roles add noise to your code, can confuse other developers into thinking custom behavior is being applied, and in edge cases may interact unexpectedly with certain assistive technologies.

This principle applies broadly — many HTML elements have implicit roles (e.g., `<nav>` has `navigation`, `<main>` has `main`, `<button>` has `button`). Adding the role they already carry is always unnecessary.

## How to fix it

Remove the `role="button"` attribute from the `<summary>` element. No replacement is needed since the semantics are already built in.

## Examples

### ❌ Incorrect: redundant `role="button"` on `<summary>`

```html
<details>
  <summary role="button">Show more information</summary>
  <p>Here is the additional information that was hidden.</p>
</details>
```

The validator will report: **The "button" role is unnecessary for element "summary".**

### ✅ Correct: `<summary>` without an explicit role

```html
<details>
  <summary>Show more information</summary>
  <p>Here is the additional information that was hidden.</p>
</details>
```

The `<summary>` element's implicit `button` role ensures assistive technologies already treat it as an interactive control. No additional attributes are required.

### ✅ Correct: a more complete `<details>` example

```html
<details>
  <summary>I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?</summary>
  <p>A keyboard.</p>
</details>
```

Clicking the `<summary>` toggles the parent `<details>` element between its open and closed states. Screen readers announce it as a button automatically, and keyboard users can activate it with <kbd>Enter</kbd> or <kbd>Space</kbd> — all without any explicit ARIA role.