# The “role” attribute must not be used on any “summary” element that is a summary for its parent “details” element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-role-attribute-must-not-be-used-on-any-summary-element-that-is-a-summary-for-its-parent-details-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `summary` element that is the first `summary` child of a `details` element can't have a `role` attribute, whatever its value.

That `summary` is the control that opens and closes its `details` element. Browsers expose it as a button and report whether the `details` is open, and the ARIA in HTML specification allows no role on it. With `role="button"`, the role only repeats what the browser already provides, and the validator also warns that it is unnecessary. Any other value, such as `heading` or `link`, tells screen readers the element is something other than the control that shows and hides the content.

This often comes from accordion markup that was moved onto `details` and `summary`. A script-driven accordion built from `div` or `span` elements needs `role="button"` and `aria-expanded` on each toggle. With `details`, the browser handles keyboard input and tracks the open state, so you can delete both attributes. The validator reports `aria-expanded` in its own message.

If `role="heading"` was there to mark the summary as a section title, put a heading element inside the `summary` instead. Its content model allows headings, but some screen readers announce only the button and drop the heading level, so test it with the ones your users rely on. If the control needs to act as a link or a tab, build a link or a tab widget instead of using `details`.

## Invalid example

The `summary` toggles its `details`, so `role="button"` is not allowed on it.

```html
<details open>
  <summary role="button">Billing address</summary>
  <p>Enter the address that appears on your card statement.</p>
</details>
```

## Valid example

Without the `role` attribute, the browser exposes the `summary` as a button that opens and closes the section.

```html
<details open>
  <summary>Billing address</summary>
  <p>Enter the address that appears on your card statement.</p>
</details>
```