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

Chrome 130 以降、スクローラーにキーボード フォーカスがない場合、デフォルトでキーボード フォーカスが可能 キーボードのフォーカス可能な子要素です

背景

スクローラーはいたるところにあります。[利用規約] ボックスに記載されている場合もあります。この場合は、一番下までスクロールして送信ボタンをクリックする必要があります。または、選択できるアイコンが並んだ縦型のメニューバーが表示されることもあります。

このような場合、多くのウェブユーザーはマウスまたは 要素内をスクロールします。ただし、ポインティング デバイス、トラックパッド、タッチスクリーンがページを移動する最適な方法であるとは限りません。一部のユーザー フォーカス可能なすべての要素にアクセスするには、HTML ページ内を移動し、 キーボードのみを使用できます。これにはさまざまな理由が考えられます。提供元: マウスの操作を困難にするような振戦やその他の問題 マウスのカーソルを視覚的に見つけるのが難しい場合や、1 つのマウス・カーソルを スイッチや音声操作もできます

ユーザー補助のベスト プラクティスでは、すべての機能をキーボードで使用できるようにすることを推奨しています。これにより、誰もが自分に最適な方法でウェブを利用できます できます。

2.1.1 キーボード: コンテンツのすべての機能は、個々のキー入力に特定のタイミングを必要とせずに、キーボード インターフェースで操作できます。ただし、基盤となる機能がエンドポイントだけでなく、ユーザーの移動経路に依存する入力を必要とする場合は除きます。（レベル 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>
tabindex が正であるため、スクロールバーはフォーカス可能です。

次の 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 が原因でスクロールがスキップされます。

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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
スクローラーに tabindex がない。

次の 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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
フォーカス可能な子が含まれているため、スクローラーはフォーカス可能です。

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 やフォーカス可能な子要素がなくても、フォーカス可能です。

この動作は、スクローラーにフォーカス可能な子要素がない場合のみ発生します。たとえば、スクローラーにすでにボタンが含まれている場合、Tab キーによるフォーカス移動はスクローラーをスキップし、ボタンに直接フォーカスします。この場合 スクローラーは 矢印キーで移動できます。このボタンをタップすると、 できます。このルールが原因で、デフォルト ルールが常に最も短い時間で 最適な方法を見つけることもできます。スクローラー要素自体を キーボードでフォーカスできるようにするには、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>
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
スクローラーの tabindex が 0 である。

この機能により、すべての場合にデフォルトでスクロールバーをキーボードで操作できるようになります。これにより、ウェブユーザーはページ内でタブ移動する際にスムーズに操作できるようになります。