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

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 値を設定しないと、ユーザーがシーケンシャル フォーカス ナビゲーションを使用してスクローラーにアクセスするのが難しい場合があります。マウスを使用できないユーザーにとっては、非常に不便です。

<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 です。

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