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

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

背景

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

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

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

2.1.1 キーボード: コンテンツのすべての機能は、個々のキー入力に特定のタイミングを必要とせずに、キーボード インターフェースで操作できます。ただし、基盤となる機能がエンドポイントだけでなく、ユーザーの移動経路に依存する入力を必要とする場合は除きます。（レベル A）

スクロール ビューのフォーカスに関するこの変更前

この変更前は、スクローラー要素が Tab キーでフォーカスされるのは、tabIndex が明示的に 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>
スクロールバーに 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>
フォーカス可能な子要素が含まれているため、スクロールバーはフォーカス可能です。

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 の値を 0 以上に設定することをおすすめします。

<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>
スクロールバーの tabindex は 0 です。

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