About This HTML Issue
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
<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:
<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:
<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>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.