htmldialogaccessibilitysemantic-markuphtml-heading

Should I use <h1> in a dialog?

HTML heading tags should be used in a way that maintains semantic structure (for both SEO and accessibility). Generally this means a single <h1> for the current page heading, with lesser headings nested from there.

However dialogs are often created dynamically, meaning that their html is added at the end of the <body>. In these cases it seems that any dialog heading numbering should start with <h1>, as their html lives outside of any existing heading structure.

To give a practical example:

Should this dialog use an <h1> heading, even though semantically it belongs within the existing "My Profile" <h1>?

Solution

  • Using an H1 for the dialog title is definitely a good idea.

    1. You must be consist in your headings and respect heading order, i.e. don't jump directly from H2 to H4 for example, but never in the WCAG it is said that there must only be a singl H1. It's perfectly valid to have multiple H1 if it makes sense in the page structure. Experts don't fully agree if H1 should always be alone and always be the page title; this is a common unagreement in WCAG interpretations. Given that screen reader users very often navigate from heading to heading, it's definitely better if the headings in general are strategically placed at the begining of the most important parts of the content rather than at a meaningless place. The very beginning of the page is offten not that important per se, because it's not exactly the position of the main menu, nor the "where you are" indication, nor the real current/important content.
    2. When a dialog appears, its title and beginning is definitely an important content to jump directly to according to point 1 above, and this is the case at the moment the dialog appears and as long as it's active.
    3. Dialogs are often modal, meaning that you aren't allowed to interact with the content outside of the dialog while it is open. IN such situations, content outside of the dialog should be totally unreachable and invisible, included for screen reader users (this is generally done with appropriate use of aria-hidden). This means that, as long as the dialog is active, if its title is an H1, this H1 is the only one alone in the page (since others are logically hidden). So, anyway, regardless of your opinion about the presence of multiple H1, you are respecting your contract with WCAG and with yourself. You only must be careful that the dialog content is only reachable and visible when the dialog is effectively open, what is anyway required for a good accessibility (I have often seen applications where the content of currently inactive dialog boxes where still readable; it's annoying and extremely confusing).

    With the hope that these three points convainced you that you have everything to win and absolutely nothing to lose to put the dialog title in a H1.