ドロップダウンメニューでタブナビゲーションを許可する方法は？

Question

私は自分のサイトのアクセシビリティを向上させる過程にあります。私は可能な限りタブのナビゲーションを許可したいが、私はドロップダウンメニューに関連する問題に立ち往生している。 <li>が入っているときにドロップダウンが開きます：ホバー状態です。フォーカスオンのときにも開くようにCSSを追加し、タブナビゲーションで開くようにしました。問題は、ドロップダウンを開くと、次のタブが閉じます（<li>内のリンクに移動し、<li>自体がフォーカスを失うためです）。

アドバイスはありますか？

ここではちょっと遊び方がありますが、これはGoogleで見つけたもので、問題を示すために調整したものです。ドロップダウンが開かれるまでtabを押すと、次のタブで閉じられることがわかります。

https://jsfiddle.net/xt3Lcvpy/

Answer 1

このためtabindex属性を使用します。共有した例では、すべての親メニュー要素のtabindexが0に設定されているため、すべての親メニュー要素にタブが表示されます。サブメニュー項目についても同様のtabindex属性（tabindex = "1,2,3 ...など"）を設定すると、それに従います。