コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > ブラウザ > アクセシビリティ改善！Chrome 124からスクロールバーがキーボードでフォーカス可能となります

アクセシビリティ改善！Chrome 124からスクロールバーがキーボードでフォーカス可能となります

ブラウザ UI/UX アクセシビリティ

Keyboard focusable scrollers

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Chrome 124からは、キーボードフォーカスが可能な子要素がない場合、スクローラーはデフォルトでキーボードフォーカスが可能です。

背景

スクローラーはどこにでもあります。送信ボタンをクリックするために下までスクロールする必要がある「利用規約」ボックスで見つけることができるかもしれません。あるいは、アイコンでいっぱいの縦型メニューバーに遭遇するかもしれません。

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

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

2.1.1 キーボード： ただし、基本的な機能が、終点だけでなく、ユーザの移動経路に依存する入力を必要とする場合を除く。(レベルA）

スクローラーのフォーカスが変更される前

この変更前は、tabindex が明示的に 0 以上に設定されている場合のみ、スクローラー要素をタブフォーカスすることができました。たとえば、次のような CSS と HTML を使用します。そして、最初のボタンからスクローラー要素にタブで移動してみてください。

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 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 値を 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>

この機能により、スクローラーはデフォルトでキーボードからアクセスできるようになり、ウェブユーザーがページ上をタブで移動する際にスムーズな操作ができるようになるでしょう。

©コハム