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

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

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

Valid: styled span instead of a heading

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

.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.

Learn more:

MDN Reference

ARIA: button role

→

MDN Reference

HTML Element: h5

→

MDN Reference

Using ARIA

→