Today I learned that modal <dialog>s opened with showModal() can have their own <h1>.
I discovered this while reading Modern Web Guidance’s HTML guide. I was skeptical at first because it’s bad practice to have multiple <h1>s on a single web page.
But this exception for modal dialogs made sense when I learned what showModal() does. It makes the rest of the page inert and as mentioned on MDN, inert HTML elements and their flat tree descendants are hidden from assistive technologies as they are excluded from the accessibility tree
. So while the modal dialog is open there is no other <h1> to compete with.
I’m not sure if there is consensus on this because I have seen many examples where an <h2> was used instead.