Is it semantically correct to use <h1> in a dialog?

Question

I've gone through the code for The Incredible Accesible Dialog v3 and i have noticed that they are using an <h1> tag

<div id="modal" aria-hidden="false" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog">
    <div id="modalDescription" class="screen-reader-offscreen">...</div>
    <h1 id="modalTitle">...</h1>
    <p>...</p>
    <form name="form1" onsubmit="return false;">...</form>
</div>

So that got me thinking, is that actually semantically correct? I mean everyone keeps saying there should only be 1 <h1> in a document.

Note that in previous versions of the dialog, they gave the dialog a role="document" which makes using <h1> ok imho

Answer 1

I know you have accepted an answer, but it is not quite right.

Sure, you can put an <h1> in a dialog and nothing will catch fire. It will technically not be correct, however.

The heading level should represent where it lives in the page structure. If your page has a single <h1>, which is your best way to go, then the dialog should get a heading level that corresponds to where it lives within the structure of the page (its content).

Most likely the dialog does not fit into the flow of the rest of the content, so it would appropriately be a sub of the page's <h1> (since it is a dialog about the page), making the dialog take <h2>.

If you are using a tabbed interface, and you have built your tabs to each be <h2>s, and your dialog applies to a specific tab, then your dialog would take an <h3>.

And so on.

Adding role=document does not change this (and may be a mis-application of the document ARIA role unless you are explicitly testing with assistive technology to ensure it works as you expect).

You can see that the all-<h1> model is now considered an anti-pattern in HTML 5.1. The W3C HTML validator will now flag it.

You can read more about the approach to structure headings in an article penned by one of the editors of the HTML5 spec: Computer says NO to HTML5 document outline

So, to answer your original question, no it is not semantically correct to use <h1> in a dialog.

Answer 2

Semantically, you can start any new section of the document (section, article, nav, aside, header, footer) with an h1.

It will change with HTML 5.1, but h1 might still be used in dialog (*) elements because they are considered as "sectioning roots". See http://w3.org/TR/html51/sections.html#headings-and-sections).

Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

blockquote body details dialog fieldset figure td

Because of the lack of support by browsers and accessibility technologies, although it's "semantically" correct, this does not mean that it's a good design choice. Authors should prefer preserving the h1..h6 hierarchy across sections to have a coherent, hierarchized/nested document outline (h1>h2>h3>...h6) which will be provided to assistive technologies.

(*) Note that, as pointed by another user, it will then be necessary to use a dialog rather than a role=dialog element to have full support.