Ошибка доступности с неправильными заголовками в мегаменю.Они появляются над h1, но для предоставления контекста необходимо использовать h2

Question

Как вам следует обращаться с тегами h в главном меню вашего сайта, если главное меню отображается выше h1?

Можно ли в этом случае нарушать иерархию заголовков, чтобы обеспечить дополнительную семантику / иерархию, или вместо тегов заголовков следует использовать другой элемент?

Например:

• У вас есть меню, которое показывает дополнительное меню при наведении / фокусе / щелчке.
• Он использует вход для флажка, чтобы указать состояние меню, чтобы оно оставалось открытым.
• В дополнительных меню используется h2> ul> li> a для организации и предоставления дополнительныхиерархия для всего меню.
• Списки ссылок третьего уровня следуют иерархии заголовков, например, h3> ul> li> a

Ссылка CodePen для большей ясности :: https://codepen.io/uxmfdesign/pen/yLBrMmd

<header>
  <div class="main-menu__container">
    <input 
      class="main-menu__toggle webaim-hidden" 
      type="checkbox" 
      id="main-menu-toggle-block-main-menu"> 

    <!-- toggle open close -->
    <label 
      class="main-menu__label" 
      for="main-menu-toggle-block-main-menu" 
      aria-label="Toggle Main menu"
      > 
        Main menu
    </label>
    <nav class="main-menu__nav">
      <div 
        class="main-menu-group" 
        data-main-menu-group=""> 
          <!-- toggle open close of menu section -->
          <input 
            id="main-menu-group-toggle-block-main-menu-0" 
            type="checkbox" 
            name="main-menu-group" 
            class="main-menu-group__toggle webaim-hidden" 
            data-main-menu-group-toggle=""> 

          <label 
            for="main-menu-group-toggle-block-main-menu-0" 
            aria-label="Open Our services" 
            aria-haspopup="true" 
            data-icon="" 
            class="main-menu-group__toggle-label"> 
            Section title
          </label>
        <div class="main-menu-group__wrapper">
          <h2 class="main-menu-group__heading">
            <span>Section title</span>
          </h2>
          <ul class="main-menu-nav-list">
            <li class="main-menu-nav-list__item">
              <h3 class="main-menu-nav-list__title">
                <a class="main-menu-nav-list__title-link" href="/ca-domains">
                  Sub-section title
                </a>
              </h3>
              <ul class="main-menu-subnav-list__menu">
                <li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
                  <a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
                    sub-page name
                  </a>
                </li>

                <li class="main-menu-subnav-list__item">
                  <a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
                    sub-page name
                  </a>
                </li>
              </ul>
            </li>

            <li class="main-menu-nav-list__item">
              <h3 class="main-menu-nav-list__title">
                <a class="main-menu-nav-list__title-link" href="/ca-domains">
                  Sub-section title
                </a>
              </h3>
              <ul class="main-menu-subnav-list__menu">
                <li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
                  <a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
                    sub-page name
                  </a>
                </li>

                <li class="main-menu-subnav-list__item">
                  <a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
                    sub-page name
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

      <div 
        class="main-menu-group" 
        data-main-menu-group=""> 
          <!-- toggle open close of menu section -->
          <input 
            id="main-menu-group-toggle-block-main-menu-0" 
            type="checkbox" 
            name="main-menu-group" 
            class="main-menu-group__toggle webaim-hidden" 
            data-main-menu-group-toggle=""> 

          <label 
            for="main-menu-group-toggle-block-main-menu-0" 
            aria-label="Open Our services" 
            aria-haspopup="true" 
            data-icon="" 
            class="main-menu-group__toggle-label"> 
            Section title
          </label>
        <div class="main-menu-group__wrapper">
          <h2 class="main-menu-group__heading">
            <span>Section title</span>
          </h2>
          <ul class="main-menu-nav-list">
            <li class="main-menu-nav-list__item">
              <h3 class="main-menu-nav-list__title">
                <a class="main-menu-nav-list__title-link" href="/ca-domains">
                  Sub-section title
                </a>
              </h3>
              <ul class="main-menu-subnav-list__menu">
                <li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
                  <a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
                    sub-page name
                  </a>
                </li>

                <li class="main-menu-subnav-list__item">
                  <a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
                    sub-page name
                  </a>
                </li>
              </ul>
            </li>

            <li class="main-menu-nav-list__item">
              <h3 class="main-menu-nav-list__title">
                <a class="main-menu-nav-list__title-link" href="/ca-domains">
                  Sub-section title
                </a>
              </h3>
              <ul class="main-menu-subnav-list__menu">
                <li class="main-menu-subnav-list__item main-menu-subnav-list__item--with-sub">
                  <a class="main-menu-subnav-list__link" href="/ca-domains/register-your-ca">
                    sub-page name
                  </a>
                </li>

                <li class="main-menu-subnav-list__item">
                  <a class="main-menu-subnav-list__link" href="/ca-domains/optimize-your-ca">
                    sub-page name
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</header>
<main>
  <h1>
    The problem heading is here
  </h1>
</main>