Webアクセシビリティ達成基準「2.1.2 キーボードトラップなしの達成基準」の話

前回はWebアクセシビリティ達成基準「2.1.1 キーボードの達成基準」について解説しました。続けて今回は「2.1.2 キーボードトラップなし」への対応について解説します。

Webサイトをキーボードだけで操作するユーザーは、視覚障害のある方だけではありません。マウスが使えない状況の方、手の不自由な方、キーボード操作に慣れたパワーユーザーなど、実はとても幅広い層が対象になります。

キーボードトラップとは何か？

キーボードトラップの定義

キーボードトラップとは、キーボード操作である要素にフォーカスが入ったものの、そこから抜け出せなくなってしまう状態のことです。たとえばTabキーでリンクを移動していくと、あるモーダルウィンドウや埋め込みコンテンツに入った後、Tabを押しても次の要素に移れず、Escキーも効かない、というようなケースが該当します。

WCAG 2.1の達成基準「2.1.2 キーボードトラップなし」は、「キーボードで操作しているユーザーが、どこかの要素に閉じ込められてしまわないこと」を求めています。

なぜこれが問題になるのか

マウスが使える人であれば、画面のどこかをクリックして抜け出せるかもしれません。しかしキーボードユーザーにとっては、操作不能＝サイトの利用が完全に止まることを意味します。ログイン、資料請求、決済などの重要な導線でこれが起きれば、実質的にサービスを利用できない状態になります。

アクセシビリティは「ちょっと使いにくい」ではなく、「使えるか使えないか」の話になることが多いのです。

キーボードトラップが発生しやすい場面

モーダルウィンドウやポップアップ

お問い合わせフォームやキャンペーン案内などで使われるモーダルウィンドウは、キーボードトラップの温床になりがちです。フォーカスがモーダル内に入った後、閉じるボタンにキーボードでたどり着けなかったり、Escキーで閉じられなかったりするとアウトです。

JavaScriptで制御されたUI

タブ切り替え、スライダー、ドロップダウンメニューなど、JavaScriptで動くUIも要注意です。見た目は問題なくても、内部的にフォーカス制御が適切でないと、Tabキーでループしてしまったり、特定の要素から出られなくなったりします。

iframeや外部埋め込み

Googleマップ、動画プレイヤー、外部フォームなどのiframeも、実装次第でキーボードトラップになります。iframeの中にフォーカスが入ったあと、親ページに戻れないケースは意外と多いです。

達成基準2.1.2の実務的な解釈

「抜け道」があればOK

2.1.2のポイントは、「キーボードだけでその場所から抜けられるか」です。必ずしもTabキーで抜ける必要はなく、Escキーや専用の閉じるボタンなど、キーボードで操作できる手段が用意されていれば問題ありません。

フォーカス管理が核心

技術的には、フォーカスをどこに置き、どう移動させるかがすべてです。モーダルを開いたら最初の入力欄にフォーカスを移し、閉じたら元のボタンに戻す。この基本が守られていないと、トラップが発生します。

実装時に気をつけるポイント

モーダルの正しい実装

モーダルを開いたら、Tabキーの移動範囲をモーダル内に限定し、閉じたら元の要素に戻す、というのが理想的な挙動です。また、必ずキーボード操作で「閉じる」ことができるようにします。Escキー対応や、フォーカス可能な閉じるボタンを用意しましょう。

tabindexの乱用を避ける

tabindexをむやみに指定すると、フォーカス順が崩れ、思わぬ場所でトラップが発生します。基本的には、HTMLの自然なフォーカス順に任せ、どうしても必要な場合だけ最小限に使うのが安全です。

JavaScriptでのフォーカス制御

動的に表示・非表示が切り替わる要素では、表示時にfocus()を適切に使い、非表示時にはフォーカスを他の安全な場所へ戻します。これを怠ると、画面上には存在しない要素にフォーカスが残り、操作不能になることがあります。

キーボードトラップのチェック方法

実際にキーボードで操作してみる

最も確実なのは、マウスを使わずにTab、Shift+Tab、Enter、Escだけでサイトを操作してみることです。フォーム入力、メニュー操作、モーダルの開閉など、主要な導線を一通り試してください。

スクリーンリーダー併用

可能であれば、スクリーンリーダーを使うと問題がより明確になります。フォーカスがどこにあるかが音声で分かるため、「抜けられない」状態をすぐに把握できます。

なぜ2.1.2対応が技術力の証明になるのか

キーボードトラップは、見た目では分かりません。デザインレビューではほぼ気付かれず、実装の質がそのまま結果に表れます。だからこそ、ここをきちんとクリアしているサイトは、内部実装まで考えられた「本当にちゃんとしたWeb制作」だと言えます。

特に、行政サイトやBtoB向けサービスでは、アクセシビリティ対応が入札要件や評価項目になるケースも増えています。2.1.2に対応できているかどうかは、制作会社の信頼性を左右するポイントでもあるのです。

まとめ

Webアクセシビリティ達成基準「2.1.2 キーボードトラップなし」は、キーボードユーザーがサイト内で行き止まりにならないことを保証する重要なルールです。モーダルやJavaScript UI、iframeなど、現代のWebでは特に注意が必要な場面が多くあります。

見た目だけでなく、操作の流れまで含めて設計・実装できるかどうかが、これからのWeb制作の技術力です。ぜひ自社サイトや制作物を、キーボードだけで操作してチェックしてみてください。そこに、改善のヒントがきっと見つかるはずです。