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

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

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

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

## Valid example

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