オーバーレイの背後にある要素のタブ移動を防止する

Question

キーボード（タブキー、シフト+タブキー）を使用してウェブページ全体をタブで動かしていて、すべてがうまく機能しています。また、Tabキーを押したままにすると、フォーカスはすべての要素（アドレスバー、要素、アドレスバーに戻るなど）を循環します。

場合によっては、コンテンツの上にモーダルと透明のオーバーレイがあります。今、私はタブキーを使用するとき、私は、左のメニューからオーバーレイに移動し、オーバーレイの最後のフォーカス可能な要素から、私はボディ要素（またはアドレスバー）にフォーカスを強制する必要があります。だから基本的には、オーバーレイがあるとき、私はタブオーバーからオーバーレイの下の要素を無視したい。私はそれをきれいに達成する方法はありますか？

私はすべてのオーバーレイの下の要素が、設定のためのtabindex = -1を考えていた

私はでtabindex = -1の設定を考えていた最も歓迎

おかげ

Answer 1

になり、他のより良い方法オーバーレイの下のすべての要素が他のより良いアプローチで最も歓迎されます

これは、通常、要素のタブを固定するときに行うことです。

私が考えることのできるもう1つの解決策があります： オーバーレイタブ要素を残りのタブ要素より低く設定します。 例：

<div menu> 
    <a tabindex="10"> 
    <a tabindex="11"> 
    <a tabindex="12"> 
</div> 
[...other code with tabindex > 10] 
<div overlay> 
    <a tabindex="1"> 
    <a tabindex="2"> 
    <a tabindex="3"> 
</div> 

これの欠点は、あなたがトラフをタブ付きした後、オーバーレイを使用すると、再びメニューに行くことになります。