5

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:

  • We have a user profile page with a "My Profile" <h1> title
  • Clicking the user icon opens a dialog
  • This dialog has a heading "Upload a Picture of Yourself"

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

Improve this question

3 Answers 3

Reset to default
3

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.

Improve this answer
2
  • good advice. the dialog definitely needs a heading. whether it's an h1, h2, h3, etc is up to you, as long as it has a heading. some a11y experts prefer it always be an h1 because it's kind of like a new page whereas others prefer to use a heading level that is in line with the current page. neither opinion is more right than the other.
    – slugolicious
    Commented Jul 20, 2018 at 17:37
  • Thanks for such a considered and practical answer.
    – The sleeping wombat
    Commented Jul 21, 2018 at 9:25
3

While it makes sense to use a h1 as a title for a modal because you visually appear to be in a new content on the web page, you are still swimming in the same context- so for a screen reader user, a h2 is a better accessible user experience. This will prevent confusion for a screen reader user as you're navigating through the same context.

Review this user flow as a no-vision screen reader user.

  1. User opens a new web page with the Contact Us page title. Contact Us is a h1. SR will read, "Heading level 1, Contact Us. You are currently on a heading level 1".
  2. User tabs through or uses the keyboard arrow keys to type their information in the form gracefully.
  3. User finally tabs or navigates through the "Submit" button and clicks enter.
  4. A dialog or modal opens up, with a title "Confirmation" and reads "Are you sure you would like to submit?".
  5. If you use a h1, you'll signal to the SR user that you're on a new page, new content, new context.
  6. While if you use a h2, you'll signal to the SR user that you're on the same page, same context on submitting your form, but different content- you're in a modal- as a header will convey.

Also note, that if you use semantic html, with appropriate roles and states in your markup, your Screen Reader will correctly tell your user that they are in a modal dialog.

QuentinC is correct that "never in WCAG it is said that there must only be a single H1`. But this is the beauty of WCAG- it will never tell you what to do, but it will guide you, what not to do.

Here's an example of the Dialog widget pattern in the w3.org website: https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html

Here's some more context on conveying information using semantic markup: https://www.w3.org/WAI/WCAG21/Techniques/failures/F2.html

Improve this answer
0

Yes, it will be better to use separate heading tags for both of them. But you can also try and use the nested header syntax for HTML. 

<h1> My Profile </h1>
......
<h1> Upload a Picture of Yourself </h1>
Improve this answer

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