Are there any scenarios where it would be appropriate to use an H1 in a document after an H1 has already been used?

Question

With consideration to semantics and accessibility, can I do something like this?

<h1>My Lightbox Demo</h1>
<h2>Thank you for trying this</h2>
<div>
    <button aria-controls="lightbox" aria-visible="false" type="button">Click me!</button>
</div>
<div id="lightbox" role="dialog" style="display: none;" aria-live="polite">
<h1>The Lightbox</h1>
<p>It worked!</p>
</div>

(Obviously assume that I have JavaScript that displays the lightbox when the button is clicked.) Is this okay for semantics/accessibility, or will it cause problems for screen reader users? Do I have to make the second H1 an H3? Is there any ARIA role that will permit this reuse of H1?

Answer 1

You can use multiple h1 elements, just be sure not to over use them and try to keep them to about one per section. Screen readers likely won't have issues with this. SEO should handle it fine as well as long as you don't overuse them and only use them when needed.