HTML Guides for 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>