# The element “h5” must not appear as a descendant of an element with the attribute “role=button”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-h5-must-not-appear-as-a-descendant-of-an-element-with-the-attribute-role-button
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `h5` element cannot be placed inside an element that has `role="button"` because heading elements are not allowed as descendants of buttons.

Screen readers and other assistive technologies treat buttons as flat, interactive controls. When a heading appears inside a button, the heading semantics are either lost or conflict with the button role. The user expects a button to contain a short label, not a document structure element. The HTML spec and ARIA authoring practices both restrict the content model of elements with `role="button"` to phrasing content only, which excludes headings (`h1` through `h6`).

If the text inside the button needs to look like a heading visually, apply CSS styling to a `span` or directly to the button itself. The visual appearance and the semantic meaning are separate concerns.

## HTML examples

### Invalid: heading inside a button role

```html
<div role="button" tabindex="0">
  <h5>Subscribe now</h5>
</div>
```

### Valid: styled span instead of a heading

```html
<div role="button" tabindex="0">
  <span class="button-label">Subscribe now</span>
</div>
```

```css
.button-label {
  font-size: 0.83em;
  font-weight: bold;
}
```

If the element is actually meant to function as a heading and not as a button, remove the `role="button"` and use a proper `button` or `a` element nearby instead.