'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:

  • 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>?

htmldialogaccessibilitysemantic-markuphtml-heading


Solution 1:[1]

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

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jacksbarrow
Solution 2 Abhinav Kaimal

Related Questions