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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-element-h-must-not-appear-as-a-descendant-of-an-element-with-the-attribute-role-img
> 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="img"`, because that role makes the element and everything in it a single image for assistive technologies.

WAI-ARIA lists `img` among the roles whose children are presentational. A screen reader announces the element once, by the name in its `aria-label` or `aria-labelledby`, and skips the semantics of its descendants. Any heading in there drops out of the heading list that screen reader users navigate by, and out of the document outline. The heading still renders, so sighted testers rarely notice anything wrong.

Two patterns usually cause it. One is a banner or card whose picture is a CSS background image: `role="img"` and `aria-label` go on the wrapper to give the background a text alternative, and the headline inside gets swallowed with it. The other is an illustration built from HTML, such as a mockup of an app screen, that is labelled as an image while its fake interface still uses real heading elements.

For a banner, give the picture its own element and keep the heading outside it: an `<img>` with `alt` text, or an empty child element that carries both the background and `role="img"`. For an HTML mockup that is only a picture, keep `role="img"` and its label, and replace the headings inside with `<p>` or `<span>` elements styled the same way. If the content inside is real and readers need it, remove `role="img"` altogether.

## Invalid example

```html
<div class="hero" role="img" aria-label="Mountains at sunset">
  <h1>Plan your next trip</h1>
</div>
```

## Valid example

Put the text alternative on the image itself and leave the heading outside it:

```html
<div class="hero">
  <img src="mountains.jpg" alt="Mountains at sunset">
  <h1>Plan your next trip</h1>
</div>
```

When the whole block is an illustration, keep `role="img"` and use plain text elements instead of headings:

```html
<div class="app-preview" role="img" aria-label="Preview of the dashboard showing this week's sales">
  <p class="preview-title">Weekly sales</p>
  <p>Revenue is up 12% on last week.</p>
</div>
```