从导航流中删除子菜单项以在使用 Tab 时更快地访问其他内容？
Remove submenu items from navigation flow to get faster to other content when using Tab?
我有一个弹出式菜单，如下所示：
在HTML中，它看起来像这样：
<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>
当我在上面切换时，切换顺序如下所示：
这意味着每个子菜单项都获得焦点。这些子菜单项很多，大约有 120 个，因此需要一些时间才能在它们上切换并找到其他内容，例如右侧的搜索框：
跳过所有子菜单项是否有意义？ 例如将 tabindex="-1" 设置为所有子菜单项，因此最终的 Tab 键顺序将如下所示：
感觉这可能会提高可访问性，因为使用 Tab 时可以更快地访问其他内容，尤其是搜索框。所有通过子菜单项访问的内容都可以在以后从主要类别访问，因此没有人会错过网站上的任何内容。
另一方面，不鼓励在某些网站上使用 tabindex="-1"，例如 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.
我可能遗漏了一些我提出的解决方案不是一个好主意的原因。这就是我希望得到一些见解。
您的解决方案是正确的解决方案，确实提高了键盘用户的可访问性。
如果您需要一些保证，请查看 W3 examples for a flyout menu
比 tabindex="-1" 好得多的方法是通过 CSS class 添加 display: none 并将菜单项更改为 <button>（假设顶级菜单项不是 link）。然后打开菜单就像切换 CSS class 一样简单，并避免管理 tabindex.
时出现任何潜在错误
如果顶级项目是另一个页面的 link，则遵循 option 2 的原则，并在主 link 旁边添加一个额外的 drop-down 图标（以 aria-label="open (menuItemName)" 为例）。
最后要考虑的是，一旦打开“大型菜单”样式（多列）的菜单，理想情况下，您应该实现箭头键导航以在列和项目之间导航。
至于按Tab是否应该进入下一个顶级项目，我不确定是否有任何指导，我个人说是应该并且箭头键用于在 drop-down 内导航，但我会将其设置为真正的 drop-down 并使用 aria-owns on the <button> and aria-expanded 来确定它是打开还是关闭。
如果您了解如何正确实施 WAI-ARIA 那么这是最好的选择，如果没有，则使用 Esc 键关闭大型菜单和/或在列表顶部时按“向上”键返回顶层 links 是一个合理的妥协。
有争议的短期小费
我确实有另一件事你可以立即做（我知道有时候现在没有解决问题的范围）作为stop-gap“解决方案”。
将 tabindex="1" 添加到搜索框，使其成为第一个获得焦点的项目，并确保您有“跳至内容”link 以便人们可以绕过菜单。
虽然这肯定不能解决问题，但在您解决问题的同时，它确实在短期内改善了键盘用户的可访问性/用户体验，虽然它不遵循“逻辑焦点顺序”，但会更好经验（作为临时修复）。
在探索具有箭头键功能等的更强大的大型菜单解决方案时，您可以快速完成的事情
这点我再强调一遍，这是暂时的改进，不是修复！
我有一个弹出式菜单，如下所示：
在HTML中，它看起来像这样：
<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>
当我在上面切换时，切换顺序如下所示：
这意味着每个子菜单项都获得焦点。这些子菜单项很多，大约有 120 个，因此需要一些时间才能在它们上切换并找到其他内容，例如右侧的搜索框：
跳过所有子菜单项是否有意义？ 例如将 tabindex="-1" 设置为所有子菜单项，因此最终的 Tab 键顺序将如下所示：
感觉这可能会提高可访问性，因为使用 Tab 时可以更快地访问其他内容，尤其是搜索框。所有通过子菜单项访问的内容都可以在以后从主要类别访问，因此没有人会错过网站上的任何内容。
另一方面，不鼓励在某些网站上使用 tabindex="-1"，例如 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.
我可能遗漏了一些我提出的解决方案不是一个好主意的原因。这就是我希望得到一些见解。
您的解决方案是正确的解决方案，确实提高了键盘用户的可访问性。
如果您需要一些保证，请查看 W3 examples for a flyout menu
比 tabindex="-1" 好得多的方法是通过 CSS class 添加 display: none 并将菜单项更改为 <button>（假设顶级菜单项不是 link）。然后打开菜单就像切换 CSS class 一样简单，并避免管理 tabindex.
如果顶级项目是另一个页面的 link，则遵循 option 2 的原则，并在主 link 旁边添加一个额外的 drop-down 图标（以 aria-label="open (menuItemName)" 为例）。
最后要考虑的是，一旦打开“大型菜单”样式（多列）的菜单，理想情况下，您应该实现箭头键导航以在列和项目之间导航。
至于按Tab是否应该进入下一个顶级项目，我不确定是否有任何指导，我个人说是应该并且箭头键用于在 drop-down 内导航，但我会将其设置为真正的 drop-down 并使用 aria-owns on the <button> and aria-expanded 来确定它是打开还是关闭。
如果您了解如何正确实施 WAI-ARIA 那么这是最好的选择，如果没有，则使用 Esc 键关闭大型菜单和/或在列表顶部时按“向上”键返回顶层 links 是一个合理的妥协。
有争议的短期小费
我确实有另一件事你可以立即做（我知道有时候现在没有解决问题的范围）作为stop-gap“解决方案”。
将 tabindex="1" 添加到搜索框，使其成为第一个获得焦点的项目，并确保您有“跳至内容”link 以便人们可以绕过菜单。
虽然这肯定不能解决问题，但在您解决问题的同时，它确实在短期内改善了键盘用户的可访问性/用户体验，虽然它不遵循“逻辑焦点顺序”，但会更好经验（作为临时修复）。
在探索具有箭头键功能等的更强大的大型菜单解决方案时，您可以快速完成的事情
这点我再强调一遍，这是暂时的改进，不是修复！