The element “h1” (or h2, h3, h4, h5, h6) must not appear as a descendant of an element with the attribute “role=button”.

Heading elements <h1> through <h6> must not appear inside an element with role="button". ARIA exposes a button as a single, flat control and treats its contents as presentational, so a heading placed inside it is no longer announced as a heading. Move the heading outside the control, or use a native <button> for the part that is actually clickable.

The WAI-ARIA specification marks button as a role whose children are presentational. When the browser maps a role="button" element into the accessibility tree, it drops the roles of everything inside it, so the heading level is lost. The W3C validator reports the conflict instead of letting the heading semantics disappear silently.

This usually happens when a clickable card or toggle is built from a <div role="button"> that wraps a heading. Headings are navigation points that screen reader users jump between, and they form the document outline. Burying one inside a button removes it from heading navigation and flattens the outline.

Keep the heading as a sibling of the control rather than a descendant. When the whole region needs to be activatable, use a native <button> (or a link) for the action and leave the heading outside it.

Invalid example

<div role="button">
  <h6>Save changes</h6>
</div>

Valid example

<h6>Settings</h6>
<button type="button">Save changes</button>

Learn more:

MDN Reference

Using ARIA: button role

→

MDN Reference

The HTML section heading elements

→