Chrome 130 以降、スクローラーにキーボード フォーカスがない場合、デフォルトでキーボード フォーカスが可能 キーボードのフォーカス可能な子要素です
背景
スクローラーはいたるところにあります。利用規約に定められている場合があります。ボックス 下にスクロールし、[送信] ボタンをクリックします。または オプションとして選択できるアイコンが縦長のメニューバーに表示される場合があります。
このような場合、多くのウェブユーザーはマウスまたは 要素内をスクロールします。ただし、ポインティング デバイス、トラックパッド、 タッチスクリーンが、すべてのユーザーにとって最適なページ操作方法であるとは限りません。一部のユーザー フォーカス可能なすべての要素にアクセスするには、HTML ページ内を移動し、 キーボードのみを使用できます。これにはさまざまな理由が考えられます。提供元: マウスの操作を困難にするような振戦やその他の問題 マウスのカーソルを視覚的に見つけるのが難しい場合や、1 つのマウス・カーソルを スイッチや音声操作もできます
ユーザー補助に関するおすすめの方法では、 操作できます。これにより、誰もが自分に最適な方法でウェブを利用できます できます。
で確認できます。2.1.1 キーボード: All キー 機能 コンテンツの制限は、 キーボード インターフェース 個々のキー入力のタイミングを具体的に説明する必要はありません。ただし、 基になる関数には、ユーザーのパスに依存する入力が必要 エンドポイントだけでなく 移動にも 使用されます（レベル A）
この変更前はスクローラーでフォーカスするため
これまでは、tabindex が 2 つしかない場合のみスクローラー要素をタブフォーカスにしていました。 明示的に 0 以上に設定されていること。たとえば、次の CSS と HTML を使用します。 次に、Tab キーを使用して最初のボタンからスクローラー要素に移動してみます。
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
次の HTML のように負の tabindex を使うと、スクローラーは スキップされます
<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
tabindex の値を設定しないと、ユーザーが使いにくい場合がある スクローラーにアクセスするためのシーケンシャル フォーカス ナビゲーション。この状況は不便に感じられるので 特別な設定も可能です
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
次の HTML のように、フォーカス可能な子を含むスクローラーには、 すでにアクセスできます。これは、矢印キーを使用して、 フォーカスできる子が 集中できるようにしますこの場合、動作は変更されません。
<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
フォーカス可能なスクローラー機能を搭載した Chrome 130 以降
この機能により、スクロールバーに tabindex 値が設定されておらず、 子をフォーカス可能にします。これにより、アクセスできないユーザーは キーボードの Tab キーと矢印キーを使用して、マウスを使わずにコンテンツにフォーカスする できます。
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
この動作は、スクローラーにフォーカス可能な子がない場合にのみ発生します。 たとえば、スクローラーにすでにボタンが含まれている場合、タブ フォーカスは スクローラーをスキップしてボタンに直接フォーカスできます。この場合 スクローラーは 矢印キーを使用してコンテンツにアクセスできます。 できます。このルールが原因で、デフォルト ルールが常に最も短い時間で 最適な方法を見つけることもできます。スクローラー要素自体を キーボードでフォーカスできるようにするには、tabIndex 値を設定することをおすすめします。 指定することもできます。
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
この機能により、デフォルトでスクローラーにキーボードでアクセスできるようになります。 ウェブユーザーは複数のタブ間を できます。