実践Webアクセシビリティ

キーボード操作時の要素の可視化：スクロール管理の実装方法

Tags: キーボード操作, JavaScript, スクロール, フォーカス管理, アクセシビリティ

はじめに

ウェブサイトやウェブアプリケーションをキーボードで操作する際、Tab キーや Shift + Tab キーを使って要素間を移動することが一般的です。このとき、フォーカスが移動した先の要素が現在のビューポート（画面表示領域）の外にある場合、多くのブラウザは自動的にスクロールして、その要素をビューポート内に収めようとします。しかし、ブラウザのデフォルトの挙動は必ずしも十分でなかったり、特定の複雑なレイアウトやカスタムコンポーネントにおいては期待通りに機能しないことがあります。

フォーカスされた要素が画面外にあるままだと、キーボードユーザー、特に視覚的な手がかりを頼りに操作するユーザー（例: キーボード操作のみを行うユーザー、弱視のユーザー、画面拡大ツールを使用するユーザー）は、自分が今どこにいるのか、何を選択しているのかを視覚的に把握できません。これは操作性の低下を招き、ユーザーを混乱させ、結果としてタスクの完了を困難にしてしまいます。

本記事では、キーボードフォーカスがビューポート外に移動した際に、その要素を適切に画面内にスクロールして表示させるための具体的なJavaScriptによる実装方法と、実装時の注意点について解説します。

なぜキーボードフォーカスのスクロール管理が必要か

キーボード操作におけるフォーカスの可視性は、ウェブアクセシビリティの重要な要素の一つです。WCAG 2.1の達成基準2.4.7 フォーカスの可視（レベルAA）では、「キーボードインタフェースを用いて操作可能なユーザインタフェースに、キーボード操作によるフォーカスインジケータがあること」が求められています。これは主にフォーカスインジケーターのデザインに関する基準ですが、フォーカスされた要素自体が画面に見えていることは、そのインジケーターを確認するために不可欠です。

ブラウザのデフォルトのスクロール挙動に依存するだけでなく、必要に応じてJavaScriptで明示的にスクロールを制御することで、より堅牢で信頼性の高いキーボードナビゲーションを実現できます。

具体的な実装方法：scrollIntoView() の活用

キーボードフォーカス時の自動スクロールを実現するための最も一般的で効果的な方法は、JavaScriptの Element.prototype.scrollIntoView() メソッドを使用することです。このメソッドは、指定された要素がビューポートの可視領域に入るように、親コンテナをスクロールさせます。

基本的なステップ

  1. フォーカスイベントの監視: ドキュメント全体、または特定のコンテナ要素に対して、フォーカスイベント（focus または focusin）を監視します。focusin イベントはバブリングするため、親要素でまとめてイベントを処理するのに適しています。
  2. イベント発生要素の特定: イベントリスナー内で、実際にフォーカスを受け取った要素（event.target）を取得します。
  3. 要素の可視化: 取得した要素に対して scrollIntoView() メソッドを呼び出します。

JavaScriptコード例

document.addEventListener('focusin', function(event) {
  const focusedElement = event.target;

  // フォーカスされた要素が要素自身にscrollIntoView()メソッドを持っているか確認
  // （SVG要素など、一部の要素は持たない場合がある）
  if (typeof focusedElement.scrollIntoView === 'function') {
    // 要素がビューポートに入るようにスクロール
    focusedElement.scrollIntoView({
      behavior: 'smooth', // スムーズなアニメーションでスクロール
      block: 'nearest'    // 要素がビューポートの近くになるようにスクロール
      // inline: 'nearest' // 横方向のスクロールが必要な場合
    });
  }
});

このコードは、ドキュメント内のいずれかの要素がフォーカスを受け取った際に発火します。event.target でフォーカスされた要素を取得し、その要素に対して scrollIntoView() を呼び出しています。

scrollIntoView() メソッドにはオプションオブジェクトを渡すことができます。 * behavior: 'auto' (デフォルト、即時スクロール) または 'smooth' (アニメーションスクロール)。スムーズなアニメーションは、ユーザーにスクロールの方向を分かりやすく示すのに役立ちます。 * block: 縦方向の位置調整。'start' (要素の上端をビューポートの上端に合わせる), 'center' (要素の中央をビューポートの中央に合わせる), 'end' (要素の下端をビューポートの下端に合わせる), 'nearest' (要素全体が見えるように、最も近い端に合わせる)。キーボードフォーカスの場合、'nearest' が最も自然な挙動を提供することが多いです。 * inline: 横方向の位置調整。'start', 'center', 'end', 'nearest'. 横スクロールが必要なコンテンツの場合に指定します。

不要なスクロールを防ぐ

上記の基本的なコードは、全てのフォーカスイベントに対してスクロールを実行します。これは、既にビューポート内にある要素にマウスでクリックしてフォーカスした場合などにもスクロールが発生し、ユーザー体験を損なう可能性があります。これを避けるために、スクロールが必要かどうかを判定する条件を追加することができます。

要素がビューポート内にあるかどうかを判定するには、Element.prototype.getBoundingClientRect() メソッドを使用します。このメソッドは、要素のサイズと、そのビューポートに対する相対位置を返します。

document.addEventListener('focusin', function(event) {
  const focusedElement = event.target;

  // フォーカスされた要素が要素自身にscrollIntoView()メソッドを持っているか確認
  if (typeof focusedElement.scrollIntoView !== 'function') {
      return;
  }

  const rect = focusedElement.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );

  // 要素がビューポート内に完全に表示されていない場合のみスクロール
  // （必要に応じて判定条件を調整してください。例: top > 0 であればスクロール不要など）
  if (!isVisible) {
    focusedElement.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }
});

このコードでは、getBoundingClientRect() が返す rect オブジェクトの top, bottom, left, right プロパティと、ウィンドウの高さ/幅を比較して、要素がビューポート内に完全に収まっているかを判定しています。完全に収まっていない場合のみ scrollIntoView() を実行します。

実装時の注意点と高度なシナリオ

固定ヘッダー/フッターへの対応

ウェブサイトによっては、ページスクロールに関係なく常に表示される固定ヘッダーやフッターが存在します。scrollIntoView() のデフォルトの挙動では、要素がこれらの固定要素の裏に隠れてしまう可能性があります。

この問題を解決するには、主に以下の2つの方法があります。

  1. CSSの scroll-padding-top / scroll-margin-top を使用する: スクロールコンテナ（通常は body や html）に対して、固定ヘッダー/フッターの高さ分の scroll-padding や scroll-margin を指定します。これにより、スクロール時に要素が固定要素の下に隠れないようオフセットが自動的に考慮されます。これはCSSのみで実現できるため、最も推奨される方法です。

    css :root { /* 固定ヘッダーの高さに合わせて調整 */ scroll-padding-top: 80px; }

  2. JavaScriptでオフセットを計算してスクロール位置を調整する: scrollIntoView() ではなく、スクロールコンテナ要素（例: window, document.documentElement, または特定のスクロール可能な div）の scrollTop プロパティを直接操作する方法です。フォーカスされた要素の offsetTop と、固定ヘッダーの高さなどを考慮して、スクロール先の位置を計算します。この方法はより複雑になりがちですが、より細かい制御が可能です。

特定のコンテナ内でのスクロール

ページ全体ではなく、特定のスクロール可能な領域（例: ダイアログ内の長いリスト、サイドバー内のコンテンツ）の中でフォーカス要素を可視化したい場合があります。

このような場合は、scrollIntoView() メソッドをそのフォーカスされた要素に対して呼び出すだけで、ブラウザは自動的に最も近いスクロール可能な祖先要素をスクロールさせます。特別な指定は不要ですが、前述の固定ヘッダーなどのオフセット調整が必要な場合は、コンテナやその子要素に scroll-padding や scroll-margin を適用することを検討してください。

パフォーマンスへの影響

focusin イベントは非常に頻繁に発生する可能性があります。特に、Tabキーを高速に押下した場合などです。イベントリスナー内で複雑な処理を行うと、パフォーマンスに影響を与える可能性があります。

多くの場合、上記の scrollIntoView のシンプルな実装であればパフォーマンス問題は発生しにくいですが、もし問題となるようであれば、以下の最適化を検討します。 * デバウンス/スロットリング: 短時間に連続してイベントが発生した場合に、処理の実行頻度を制限します。ただし、フォーカス移動はユーザーの意図的な操作であるため、遅延させすぎるとかえって不自然になる可能性があります。 * スクロールコンテナを限定: ドキュメント全体ではなく、特定の主要なスクロールコンテナ要素にのみリスナーを設定します。 * CSS scroll-padding を優先: JavaScriptでの複雑な位置計算や scrollTop 操作よりも、可能であればCSSプロパティ (scroll-padding) による解決を優先します。

tabindex="-1" 要素への対応

JavaScriptでプログラム的にフォーカスを当てる要素（例: モーダルを開いた際の最初の要素、エラーメッセージなど）には、tabindex="-1" が使用されることがあります。これらの要素もフォーカスを受け取った際に適切にスクロールされるべきですが、ネイティブのキーボードナビゲーションの対象ではないため、ブラウザのデフォルトのスクロール挙動が効かない場合があります。

上記の focusin イベントリスナーによる実装は、tabindex="-1" を持つ要素へのプログラム的なフォーカス移動（例: element.focus()）でも発火するため、この場合も適切に要素を可視化できます。

テスト方法

実装したキーボードフォーカスのスクロール管理が適切に機能しているかを確認するには、以下の方法でテストを行います。

まとめ

キーボードで操作する際にフォーカスが当たった要素を常にビューポート内に表示させることは、多くのユーザーにとって円滑なナビゲーションのために不可欠なアクセシビリティ対応です。ブラウザのデフォルト機能だけでは不十分な場合や、特定のレイアウト、カスタムコンポーネントにおいては、JavaScriptの scrollIntoView() メソッドを活用することで、この問題を効果的に解決できます。

focusin イベントを監視し、フォーカスされた要素に対して scrollIntoView({ behavior: 'smooth', block: 'nearest' }) を呼び出す基本的な実装は比較的シンプルですが、固定ヘッダー/フッターへの対応や特定のコンテナ内でのスクロールなど、サイトの構造に応じた考慮が必要です。CSSの scroll-padding や scroll-margin は、多くのオフセット問題に対して効果的な解決策を提供します。

本記事で紹介した実装方法とテストを通じて、あなたのウェブサイトのキーボードアクセシビリティをさらに向上させ、より多くのユーザーが快適に操作できる環境を提供できるようになることを願っています。