2

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.

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.