LEARN BY EXAMPLE

2.1.2 キーボードトラップなし レベル A

キーボードで入れる場所から、キーボードで出られるようにする。

概要

キーボードで操作位置(フォーカス)を移せる部品からは、キーボードだけで外へ出られるようにします。一般的な方法で出られない場合は、出るための操作方法を利用者へ伝えます。操作位置を部品の中から外せなくなることを「キーボードトラップ」と呼びます。

入力欄の先にある申込方法へ進めるか

利用者が困る例 入力欄の中を巡回する

Tab:氏名 → 電話番号 → 氏名へ戻る

申込方法へ進めない。
入力欄の中からキーボードで出る手段がありません。「利用者が困る例」は操作できない静止図です。

改善した例 入力欄の外へ進める

申込者の情報

申込方法

受付で参加を申し込めます。

Tab:氏名 → 電話番号 → 申込方法

入力欄の外へ進み、申込方法を開ける。
氏名と電話番号の欄から、その後の内容へ移動できます。

図:同じ氏名・電話番号の欄と、その後の「申込方法」を比較。「改善した例」ではTabとShift+Tabで移動し、「申込方法」をEnterやSpaceで開閉できます。入力は架空の値で試してください。図に送信機能はありません。

達成できないと起こる問題の例

写真教室の申込画面で、キーボードを使う人が氏名と電話番号の入力欄を順に確認します。しかし、電話番号の欄でTabキーを押すと氏名へ戻り、逆に進んでも入力欄の中を巡回します。Escなど、ほかのキーボード操作でも抜け出せません。

利用者はその後にある「申込方法」へ進めず、ページの続きを利用できません。入力欄を操作できても、そこから外へ出る手段がなければ作業が止まってしまいます。

達成するための改善例

同じ画面で、氏名、電話番号、入力欄の外の「申込方法」へTabキーで順に移れるようにします。Shift+Tabでは逆向きに移れます。

キーボードを使う人も入力欄を確認した後、ページの続きへ進んで申込方法を開けます。ページの一部に、マウスを使わないと出られない場所を作らないようにします。

確認のポイント

  • キーボードで入れるすべての部品から、キーボードだけで外へ出られますか。
  • Tabキーで最後の項目まで進むと、同じ場所へ戻り続けていませんか。
  • ダイアログや埋め込まれたアプリにも、キーボードで使える終了方法がありますか。
  • 一般的でない退出操作が必要なら、その操作を利用者に伝えていますか。

条件と補足

特別な退出操作がある場合

修飾キーを伴わない矢印キー、Tabキー、その他の標準的な退出方法でフォーカスを外せない場合は、外す方法を通知します。キーボードで出られることと、その方法が伝わることの両方が必要です。

「標準的な方法」は端末・ブラウザー・OSによって異なります。公式解説は多くの物理キーボード環境でEscが一般的な退出方法であることを説明しています。どの部品もEscだけで閉じることを一律に求める基準ではありません。

独自のキー操作を使う場合は、入る前や部品内で、キーボードでも読める説明を用意する方法があります。利用者が自分で操作を推測することだけに頼りません。

ダイアログ内の移動を制限する場合

確認ダイアログを開いている間、Tabキーの移動をその中に限る設計もあります。キーボードで使える「閉じる」「キャンセル」などの手段があり、利用者が退出方法を理解できれば、移動を一時的に限ること自体が失敗になるわけではありません。

閉じるボタンがマウスでしか使えなかったり、特別な退出キーが説明されていなかったりしないかを確かめます。

ほかの基準と非干渉

2.1.1「キーボード」は機能をキーボードで利用できるかを扱います。2.1.2では入った場所から外へ出られるかも確認します。

この基準は代わりのページを用意していても、元の部品がキーボード操作を妨げていないかを確かめる対象です。詳しい条件は非干渉の補足を参照してください。

この改善例で扱うのは、図に示した入力欄から外へ移動する操作です。ページやサイト全体のWCAG適合を示すものではありません。

参照資料

テクニックは達成する方法の例です。特定のテクニックを採用することだけが必須ではありません。

出典の最終確認: 2026-11-09。写真教室の申込画面はこの教材のために作った架空の例です。