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

Heading elements <h1> through <h6> must not appear inside an element with role="separator", because a separator's contents are presentational and the heading would lose its meaning.

WAI-ARIA marks separator as a role whose children are presentational. Assistive technology gets the separator as a single divider, and the browser drops the roles of everything inside it. The heading stops being a heading: screen reader users can't jump to it, and it disappears from the document outline. The rule covers a plain divider and a focusable separator, such as the handle of a resizable panel.

This usually comes from a "divider with a title" pattern, where one wrapper with role="separator" holds both the decorative lines and the section heading. Put the heading next to the separator instead of inside it. A native <hr> already has the separator role, so it doesn't need the attribute.

Invalid example

<div class="divider" role="separator">
  <h2>Our services</h2>
</div>

Valid example

<hr class="divider">
<h2>Our services</h2>

Learn more:

MDN Reference

MDN Web Docs: ARIA separator role

→

MDN Reference

MDN Web Docs: The HTML section heading elements

→

MDN Reference

MDN Web Docs: The hr element

→