ウェブアクセシビリティはすべてのユーザーが快適にウェブコンテンツを利用できるようにするための重要な概念です。
特に「キーボードトラップなし」という達成基準はキーボードでウェブを操作するユーザーにとって不可欠です。
本記事では、キーボードトラップの具体例とその解消方法について解説します。
目次
キーボードトラップとは？
キーボードトラップとはウェブコンテンツ内の特定の要素にキーボードフォーカスが入った際そこからフォーカスを移動できなくなる状態を指します。
これによりユーザーがページの他の部分にアクセスできなくなる問題が発生します。
達成基準 2.1.2「キーボードトラップなし」の内容
JIS X8341-3の達成基準 2.1.2では、以下のように記載されています。
キーボードインタフェースを用いてキーボードフォーカスをそのウェブページのあるコンポーネントに移動できる場合、キーボードインタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能である。
この基準は、ウェブページ内のすべてのコンポーネントがキーボード操作だけで利用可能であることを求めています。
キーボードトラップの具体例
キーボードトラップが発生する場面
- モーダルウィンドウ
モーダルウィンドウ内の操作が終了しても、フォーカスがウィンドウ内に固定され、他のコンテンツに移動できない場合。 - 埋め込みコンテンツ
埋め込みフレームやカスタムコンポーネントでフォーカスが固定される。 - JavaScriptエラー
フォーカス管理を誤るコードによって、特定の要素からフォーカスを外せない状態になる。
キーボードトラップを防ぐ方法
モーダルウィンドウの場合
モーダルウィンドウを使用する場合、以下の方法でフォーカスを適切に管理できます。
- 初期フォーカスの設定
モーダルを開いたとき、フォーカスを最初の操作可能な要素に移動する。javascriptコードをコピーするmodalElement.querySelector('button').focus(); - モーダル終了時のフォーカス戻し
モーダルを閉じた後、元のトリガー要素にフォーカスを戻す。javascriptコードをコピーするmodalTrigger.focus();
カスタムコンポーネントの場合
ARIA属性を活用してフォーカスの制御を行います。
tabindex属性: フォーカス可能な要素を指定。aria-hidden属性: 非表示状態でのフォーカスを無効化。
キーボードトラップの解消例
以下は、モーダルウィンドウでのキーボードトラップを防ぐためのコード例です。
const modal = document.querySelector('#modal');
const closeButton = modal.querySelector('.close');
const openButton = document.querySelector('#openModal');
openButton.addEventListener('click', () => {
modal.style.display = 'block';
closeButton.focus(); // モーダル内の最初の要素にフォーカス
});
closeButton.addEventListener('click', () => {
modal.style.display = 'none';
openButton.focus(); // トリガー要素にフォーカスを戻す
});
達成基準の重要性
「キーボードトラップなし」は、アクセシビリティを確保する上で基本的かつ重要な要件です。
この基準を満たすことでキーボードのみで操作するユーザーや支援技術を利用するユーザーにとって利用しやすいウェブコンテンツが実現します。
まとめ
キーボードトラップを防ぐことはウェブアクセシビリティの基本です。
モーダルウィンドウや埋め込みコンテンツを設計する際にはフォーカス制御を適切に行いすべてのユーザーが快適に操作できるよう配慮しましょう。
