Which header should we choose for modal dialogs?

user_12730491 0
Viewed 1992

Headers should represent the page's structure and be nested accordingly. w3.org states the following:

Exception for fixed page sections

In fixed sections of the page, for example in sidebars, the heading ranks should not change depending on the ranks in the content area. In those cases, consistency across pages is more important.

Is this also true for modal dialogs? They usually aren't part of the actual page structure after all. Which header should we use for modal dialogs?

Bootstrap seems to always use h5s.

As an example we use a bootstrap modal in our footer which displays additional information about our application's version:

<div id="v-modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Version</h5>
    </div>
    <div class="modal-body">
      <p>Copyright © 2020 Foobar</p>
      <p>Version 1.3.7124.19131</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
    </div>
  </div>
</div>

In an a11y test we recently received this was marked as a potential issue.

bootstrap-modal twitter-bootstrap accessibility
1 Answers

Due to the upcoming changes in HTML 5.1 (where we don't know if multiple H1s will still be valid and where within HTML) I always recommend one <h1> per page at all times for accessibility (and SEO) as that is the long standing and accepted practice.

This makes the answer in your circumstances to use a <h2>.

I recommend this as your modal sits outside of the flow of the rest of the document and so it logically should be a 'top level' heading level.

The only exception to this is if your modal is within the flow of your document, at that point it would probably be best to use an appropriate <h> level that fits with it's position in the document flow.

Although I am not sure why anyone would want a modal within the flow of the document as that is not a good practice in the first place.

user_27028940
Related