Remove submenu items from navigation flow to get faster to other content when using Tab?

Question

I have a fly-out menu that looks like this:

In HTML, it looks like this:

<div class="c-header__container">
  <ul class="c-header__menu-container" id="menu-container">
    <li class="c-header__menu-item c-header__menu-item--search">
      <div class="c-header__search-container c-header__search-container--mobile" id="mobile-search"></div>
    </li>

    <li class="c-header__menu-item">
      <a class="c-header__menu-close" href="#">
        <i class="far fa-times-circle"></i>
      </a>
      <a class="c-header__menu-link c-header__menu-link--arrow" href="/produkty-pro-zeny">Dámské</a>
      <ul class="c-header__sub-menu-container" ref="subMenu">
        <li class="c-header__sub-menu-item">
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/vyprodej-pro-zeny">Výprodej</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kemping">Kemping</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/produkty-pro-zeny">Zobrazit vše pro ženy</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obleceni-pro-zeny">Dámské oblečení</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/trika-pro-zeny">Trika</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/mikiny-pro-zeny">Mikiny</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/svetry-pro-zeny">Svetry</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/bundy-pro-zeny">Bundy</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kabaty-pro-zeny">Kabáty</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kalhoty-pro-zeny">Kalhoty</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/vesty-pro-zeny">Vesty</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/funkcni-pradlo-pro-zeny">Funkční prádlo</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kosile-pro-zeny">Košile</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/capri-pro-zeny">Capri</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/saty-a-sukne-pro-zeny">Šaty a sukně</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kratasy-pro-zeny">Kraťasy</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obuv-pro-zeny">Dámská obuv</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-outdoor-pro-zeny">Outdoorová obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-zimni-pro-zeny">Zimní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-do-mesta-pro-zeny">Městská obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-sportovni-pro-zeny">Sportovní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/sandale-a-zabky-pro-zeny">Letní obuv</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/doplnky-pro-zeny">Dámské doplňky a příslušenství</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/cepice-a-ksiltovky-pro-zeny">Čepice a kšiltovky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/saly-celenky-a-satky-pro-zeny">Šály a šátky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/rukavice-pro-zeny">Zimní rukavice</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/ponozky-pro-zeny">Ponožky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/batohy-tasky-penezenky-pro-zeny">Batohy a tašky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/impregnace-a-prostredky-pro-zeny">Impregnace a prostředky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kemping-pro-zeny">Kemping</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="c-header__menu-item">
      <a class="c-header__menu-close" href="#">
        <i class="far fa-times-circle"></i>
      </a>
      <a class="c-header__menu-link c-header__menu-link--arrow" href="/produkty-pro-muze">Pánské</a>
      <ul class="c-header__sub-menu-container" ref="subMenu">
        <li class="c-header__sub-menu-item">
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/vyprodej-pro-muze">Výprodej</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kemping">Kemping</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/produkty-pro-muze">Zobrazit vše pro muže</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obleceni-pro-muze">Pánské oblečení</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/trika-pro-muze">Trika</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/mikiny-pro-muze">Mikiny</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/svetry-pro-muze">Svetry</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/bundy-pro-muze">Bundy</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kalhoty-pro-muze">Kalhoty</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/vesty-pro-muze">Vesty</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/funkcni-pradlo-pro-muze">Funkční prádlo</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kosile-pro-muze">Košile</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/capri-pro-muze">Capri</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kratasy-pro-muze">Kraťasy</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obuv-pro-muze">Pánská obuv</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-outdoor-pro-muze">Outdoorová obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-do-mesta-pro-muze">Městská obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-sportovni-pro-muze">Sportovní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/sandale-a-zabky-pro-muze">Letní obuv</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/doplnky-pro-muze">Pánské doplňky a příslušenství</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/cepice-a-ksiltovky-pro-muze">Čepice a kšiltovky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/saly-celenky-a-satky-pro-muze">Šály a šátky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/ponozky-pro-muze">Ponožky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/batohy-tasky-penezenky-pro-muze">Batohy a tašky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/impregnace-a-prostredky-pro-muze">Impregnace a prostředky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kemping-pro-muze">Kemping</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="c-header__menu-item">
      <a class="c-header__menu-close" href="#">
        <i class="far fa-times-circle"></i>
      </a>
      <a class="c-header__menu-link c-header__menu-link--arrow" href="/produkty-pro-deti">Dětské</a>
      <ul class="c-header__sub-menu-container" ref="subMenu">
        <li class="c-header__sub-menu-item">
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/vyprodej-pro-deti">Výprodej</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kemping">Kemping</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/produkty-pro-deti">Zobrazit vše pro děti</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obleceni-pro-deti">Dětské oblečení</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/trika-pro-deti">Trika</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/mikiny-pro-deti">Mikiny</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/bundy-pro-deti">Bundy</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kabaty-pro-deti">Kabáty</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kalhoty-pro-deti">Kalhoty</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/vesty-pro-deti">Vesty</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/funkcni-pradlo-pro-deti">Funkční prádlo</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/sety-a-jine-pro-deti">Sety</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/capri-pro-deti">Capri</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/saty-a-sukne-pro-deti">Šaty a sukně</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kratasy-pro-deti">Kraťasy</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obuv-pro-deti">Dětská obuv</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-outdoor-pro-deti">Outdoorová obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-zimni-pro-deti">Zimní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-do-mesta-pro-deti">Městská obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-sportovni-pro-deti">Sportovní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/sandale-a-zabky-pro-deti">Letní obuv</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/doplnky-pro-deti">Dětské doplňky a příslušenství</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/cepice-a-ksiltovky-pro-deti">Čepice a kšiltovky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/saly-celenky-a-satky-pro-deti">Šály a šátky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/rukavice-pro-deti">Zimní rukavice</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/ponozky-pro-deti">Ponožky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/batohy-tasky-penezenky-pro-deti">Batohy a tašky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/impregnace-a-prostredky-pro-deti">Impregnace a prostředky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kemping-pro-deti">Kemping</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="c-header__menu-item">
      <a class="c-header__menu-close" href="#">
        <i class="far fa-times-circle"></i>
      </a>
      <a class="c-header__menu-link c-header__menu-link--arrow" href="/obuv">Obuv</a>
      <ul class="c-header__sub-menu-container" ref="subMenu">
        <li class="c-header__sub-menu-item">
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/vyprodej-obuv">Výprodej</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link c-header__sub-menu-category-item--all" href="/obuv">Zobrazit všechnu obuv</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obuv-pro-zeny">Dámská obuv</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-outdoor-pro-zeny">Outdoorová obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-zimni-pro-zeny">Zimní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-do-mesta-pro-zeny">Městská obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-sportovni-pro-zeny">Sportovní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/sandale-a-zabky-pro-zeny">Letní obuv</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obuv-pro-muze">Pánská obuv</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-outdoor-pro-muze">Outdoorová obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-do-mesta-pro-muze">Městská obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-sportovni-pro-muze">Sportovní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/sandale-a-zabky-pro-muze">Letní obuv</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/obuv-pro-deti">Dětská obuv</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-outdoor-pro-deti">Outdoorová obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-zimni-pro-deti">Zimní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-do-mesta-pro-deti">Městská obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/boty-sportovni-pro-deti">Sportovní obuv</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/sandale-a-zabky-pro-deti">Letní obuv</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="c-header__menu-item">
      <a class="c-header__menu-close" href="#">
        <i class="far fa-times-circle"></i>
      </a>
      <a class="c-header__menu-link c-header__menu-link--arrow" href="/doplnky">Doplňky</a>
      <ul class="c-header__sub-menu-container" ref="subMenu">
        <li class="c-header__sub-menu-item">
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/vyprodej-doplnky-a-prislusenstvi">Výprodej</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link c-header__sub-menu-category-item--all" href="/doplnky">Zobrazit všechny doplňky</a>
            </li>
          </ul>
        </li>
        <li class="c-header__sub-menu-item">
          <a class="c-header__sub-menu-link" href="/doplnky-pro-zeny">Dámské doplňky a příslušenství</a>
          <ul class="c-header__sub-menu-category-container">
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/cepice-a-ksiltovky-pro-deti">Čepice a kšiltovky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/saly-celenky-a-satky-pro-zeny">Šály a šátky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/rukavice-pro-zeny">Zimní rukavice</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/ponozky-pro-zeny">Ponožky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/batohy-tasky-penezenky-pro-zeny">Batohy a tašky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/impregnace-a-prostredky-pro-zeny">Impregnace a prostředky</a>
            </li>
            <li class="c-header__sub-menu-category-item">
              <a class="c-header__sub-menu-category-link" href="/kemping-pro-zeny">Kemping</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="c-header__menu-item">
      <a class="c-header__menu-close" href="#">
        <i class="far fa-times-circle"></i>
      </a>
      <a class="c-header__menu-link c-header__menu-link--discount" href="/vyprodej">Výprodej</a>
    </li>

    <li class="c-header__menu-item c-header__menu-item--profile c-header__menu-item--border">
      <a class="c-header__menu-link c-header__menu-link--my-account js-user-popup-open" href="/muj-profil">
        <i class="far fa-user-circle"></i>
        <span>Můj profil</span>
      </a>
      <div class="c-header__menu-language">
        <a class="c-header__menu-link c-header__menu-link--language c-header__menu-link--active" href="#">CZ</a>
        <a class="c-header__menu-link c-header__menu-link--language" href="#">SK</a>
      </div>
    </li>

    <li class="c-header__menu-item c-header__menu-item--last" id="desktop-search">
      <div class="c-header__search-container" id="search-container">
        <input class="c-header__search-input" id="fulltext-search-input" type="text" placeholder="Vyhledat..." maxlength="50" />
        <a class="c-header__search-close" id="fulltext-search-close" href="#">
          <i class="fas fa-times"></i>
        </a>
        <button class="c-header__search-button" id="fulltext-search-button" title="Vyhledat">
          <i class="fas fa-search"></i>
        </button>
        <div class="c-search-results" id="search-result-container"></div>
      </div>
    </li>
  </ul>
</div>

When I tab over it, the tabbing order looks like this:

It means that every submenu item receives focus. There are a lot of these submenu items, about 120, so it takes some time to tab over them and get to other content, for example to the search box on the right side:

would it make sense to skip all the submenu items? For example setting tabindex="-1" to all of them, so the final tab order would look like this:

It feels like this might improve accessibility because other content is accessible faster when using Tab, especially the search box. All the content accessible via the submenu items could be later accessed from the main categories, so no one would miss any content on the website.

On the other hand, using tabindex="-1" is discouraged on some sites, for example on WebAim.org:

A tabindex="-1" value removes interactive elements from the default navigation flow. In most cases, this would not be desirable.

Remember that tabindex="-1" removes the element from the default navigation flow. Do not assign tabindex="-1" to any element that must be keyboard navigable, such as a link or button that sighted users can click on with the mouse.

I might be missing some reason why this proposed solution of mine is not a good idea. That's what I hope to get some insights on.

Answer 1

Your solution is the correct solution and does indeed improve the accessibility for keyboard users.

If you need some reassurance check the W3 examples for a flyout menu

Much better than tabindex="-1" would just be to add display: none via a CSS class and change the menu item to a <button> (assuming the top level menu item is not a link). Then opening the menu is as simple as toggling the CSS class and avoids any potential errors with managing tabindex.

If the top level item is a link to another page then follow the principles of option 2 and have an additional drop-down icon next to the main link instead (with aria-label="open (menuItemName)" for example).

The final consideration is that once a menu is open that is a "mega menu" style (multiple columns), you should ideally implement arrow key navigation to take you between columns and items.

As for whether pressing Tab should go to the next top level item it is something that I am not sure if there is any guidance on, I personally say yes it should and arrow keys are for navigation within a drop-down, but I would make it a true drop-down with aria-owns on the <button> and aria-expanded for whether it is open or closed.

If you have the knowledge of how to implement WAI-ARIA correctly then that is the best option, if not then making the Esc key close the mega menu and or pressing "up" when at the top of the list to get back to the top level links is a reasonable compromise.

Controversial short term tip

I do have one other thing you can do straight away (I know sometimes there is not the scope to fix things right now) as a stop-gap "solution".

Add tabindex="1" to the search box so it is the first item that receives focus and make sure you have "skip to content" links so people can bypass the menu.

While this certainly does not solve the issue, it does improve accessibility / UX for keyboard users in the short term while you fix the problem, and although it doesn't follow "logical focus order" it would be a better experience (as a temporary fix).

Something that you can do quickly while you explore a more robust solution to the mega menu with arrow key functionality etc. etc.

I will stress this point one more time, this is a temporary improvement, not a fix!