LEARN BY EXAMPLE
2.1.2 キーボードトラップなし レベル A
キーボードで入れる場所から、キーボードで出られるようにする。
概要
キーボードで操作位置(フォーカス)を移せる部品からは、キーボードだけで外へ出られるようにします。一般的な方法で出られない場合は、出るための操作方法を利用者へ伝えます。操作位置を部品の中から外せなくなることを「キーボードトラップ」と呼びます。
入力欄の先にある申込方法へ進めるか
利用者が困る例 入力欄の中を巡回する
Tab:氏名 → 電話番号 → 氏名へ戻る
申込方法へ進めない。
入力欄の中からキーボードで出る手段がありません。「利用者が困る例」は操作できない静止図です。
改善した例 入力欄の外へ進める
申込者の情報
申込方法
受付で参加を申し込めます。
Tab:氏名 → 電話番号 → 申込方法
入力欄の外へ進み、申込方法を開ける。
氏名と電話番号の欄から、その後の内容へ移動できます。
達成できないと起こる問題の例
写真教室の申込画面で、キーボードを使う人が氏名と電話番号の入力欄を順に確認します。しかし、電話番号の欄でTabキーを押すと氏名へ戻り、逆に進んでも入力欄の中を巡回します。Escなど、ほかのキーボード操作でも抜け出せません。
利用者はその後にある「申込方法」へ進めず、ページの続きを利用できません。入力欄を操作できても、そこから外へ出る手段がなければ作業が止まってしまいます。
達成するための改善例
同じ画面で、氏名、電話番号、入力欄の外の「申込方法」へTabキーで順に移れるようにします。Shift+Tabでは逆向きに移れます。
キーボードを使う人も入力欄を確認した後、ページの続きへ進んで申込方法を開けます。ページの一部に、マウスを使わないと出られない場所を作らないようにします。
確認のポイント
- キーボードで入れるすべての部品から、キーボードだけで外へ出られますか。
- Tabキーで最後の項目まで進むと、同じ場所へ戻り続けていませんか。
- ダイアログや埋め込まれたアプリにも、キーボードで使える終了方法がありますか。
- 一般的でない退出操作が必要なら、その操作を利用者に伝えていますか。
条件と補足
特別な退出操作がある場合
修飾キーを伴わない矢印キー、Tabキー、その他の標準的な退出方法でフォーカスを外せない場合は、外す方法を通知します。キーボードで出られることと、その方法が伝わることの両方が必要です。
「標準的な方法」は端末・ブラウザー・OSによって異なります。公式解説は多くの物理キーボード環境でEscが一般的な退出方法であることを説明しています。どの部品もEscだけで閉じることを一律に求める基準ではありません。
独自のキー操作を使う場合は、入る前や部品内で、キーボードでも読める説明を用意する方法があります。利用者が自分で操作を推測することだけに頼りません。
ダイアログ内の移動を制限する場合
確認ダイアログを開いている間、Tabキーの移動をその中に限る設計もあります。キーボードで使える「閉じる」「キャンセル」などの手段があり、利用者が退出方法を理解できれば、移動を一時的に限ること自体が失敗になるわけではありません。
閉じるボタンがマウスでしか使えなかったり、特別な退出キーが説明されていなかったりしないかを確かめます。
ほかの基準と非干渉
2.1.1「キーボード」は機能をキーボードで利用できるかを扱います。2.1.2では入った場所から外へ出られるかも確認します。
この基準は代わりのページを用意していても、元の部品がキーボード操作を妨げていないかを確かめる対象です。詳しい条件は非干渉の補足を参照してください。
この改善例で扱うのは、図に示した入力欄から外へ移動する操作です。ページやサイト全体のWCAG適合を示すものではありません。
参照資料
- WCAG 2.2 本体:2.1.2 No Keyboard Trap(要件)
- WAIC:2.1.2 キーボードトラップなしの解説(日本語訳)
- W3C:Understanding 2.1.2(英語公開版)
- W3C:G21 キーボードで閉じ込めない方法(実装例)
テクニックは達成する方法の例です。特定のテクニックを採用することだけが必須ではありません。
出典の最終確認: 2026-11-09。写真教室の申込画面はこの教材のために作った架空の例です。