このページは Cloud Translation API によって翻訳されました。

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

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

背景

スクローラーは至るところに存在しています。[利用規約] ボックス内に利用規約が表示される場合がありますが、一番下までスクロールして [送信] ボタンをクリックする必要があります。垂直のメニューバーに多数のアイコンが表示され、そこから選択することもできます。

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

ユーザー補助に関するおすすめの方法では、すべての機能をキーボードで利用できるようにすることを推奨しています。そうすることで、誰もがそれぞれ最適な方法でウェブを利用できます。

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

スクローラーにフォーカスする変更前

この変更以前は、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 124 以降

この機能を使用すると、tabindex 値が設定されておらず、フォーカス可能な子のないスクローラーを、キーボードフォーカス可能にできます。これにより、マウスを使用しない、またはキーボードのタブと矢印キーでコンテンツをフォーカスするユーザーを追加できます。

<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 またはフォーカス可能な子がまだないため、フォーカス可能です。

この動作は、スクローラーにフォーカス可能な子がない場合にのみ発生します。たとえば、スクローラーにすでにボタンが含まれている場合、タブフォーカスはスクローラーをスキップして、直接ボタンにフォーカスします。この場合、ボタンがフォーカスされると、すでに矢印キーを使用してスクローラーのコンテンツにアクセスできます。このルールにより、そのような子が存在する場合、デフォルトは必ずしも最適な方法で動作しない可能性があります。この状況でスクローラー要素自体をキーボードフォーカス可能にする場合は、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 である。

この機能により、すべてのケースでスクローラーにデフォルトでキーボードアクセスが可能になるため、ウェブユーザーはページ間を移動する際にタブをよりスムーズに使用できます。