Heading levels in an accessible modal window

Question

What's the most/correct accessible way to use headings in a web modal window? The modal itself is fully accessible (we have tried that out already) but we're unsure whether we shall use h1 or h2 as the modal heading?

Alternative 1: We use h1 since the info in the modal is the only thing visible to the user.

Alternative 2: We use h2 since the document already have a h1-label. A HTML-document shall only have one h1-heading per page.

I personally think alt 1 is the way to go, but I just need some second opinion on this.

Answer 1

h1 can be used more than once in a page. An h1 is there to indicate that the element is a primary title for a specific content. eg: If you have a group of cards with a title, an preview image and a short description, it is perfectly fine to use an h1 for the title on every card.

Going back to your modal, I would say that the alternative 1 is the way to go since it's going to be the main (and probably only) title on the modal.