seo Question posted in
Some basic information to get you started with this can be found here.

Should I use <h1> in a dialog? – SEO

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

Tags:

3

Answers


  1. 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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search