キーボードのフォーカス可能なスクローラー

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>

この機能により、デフォルトでスクローラーにキーボードでアクセスできるようになります。 ウェブユーザーは複数のタブ間を できます。