LEARN BY EXAMPLE
3.2.2 入力時 レベル A
入力や選択で自動的に画面が切り替わる場合は、使う前に知らせる。
概要
文字の入力や選択などで部品の設定を変えたときは、別のページへの移動などが自動的に起きないようにします。自動的に起きる場合は、その部品を使う前に動作を知らせます。
講座の選択と案内への移動
利用者が困る例 選択だけで画面が切り替わる
ほかの選択肢を確かめる前に、移動してしまう。
選び直すために、元の画面へ戻る必要があります。
改善した例 選んでからボタンで進む
講座を選んでからボタンを押すと、図の下にある案内へ移ります。
選択を確かめてから、自分で進める。
写真教室と料理教室を選び直しても、その場にとどまれます。
選んだ講座の案内
達成できないと起こる問題の例
キーボードを使う人が講座の選択肢を確かめようとします。写真教室を選ぶと、予告なく申込画面へ移り、選択肢の比較を続けられなくなります。
選択を直したい人は元の画面へ戻る必要があります。読み上げや画面拡大を使う人は何が変わったか気づきにくく、どこから操作を続ければよいか分からなくなることがあります。
達成するための改善例
同じ講座の選択欄で、選択しただけで画面を移す動作をやめ、「選んだ講座の案内へ進む」ボタンを加えます。利用者はその場で選び直してから、自分でボタンを実行できます。
図の「改善した例」では写真教室と料理教室を矢印キーで選べます。選択中はその場にとどまり、ボタンをEnterキーやSpaceキーで実行すると、選んだ講座の案内見出しへ移ります。
確認のポイント
- 文字を入力したり、チェックや選択を変えたりしただけで、予告なく別の画面へ移りませんか。
- 入力や選択を変えたとき、フォーカスが予告なく別の部品へ自動的に移りませんか。
- 設定の変更でコンテキストが自動的に変わる場合、何が起きるかを操作前に確認できますか。
- 選択肢をキーボードで確かめたり選び直したりする途中に、予告のない移動が起きませんか。
条件と補足
設定を変える操作
文字の入力、チェックボックスの切替、ラジオボタンや一覧での選択など、操作を終えたあとも残る値や状態の変更を扱います。
リンクを実行して移動することや、送信ボタンを押して次の画面へ進むことは、設定を変える操作とは区別します。一方、押した状態を切り替えるボタンなど、ボタンの形でも設定を変えるものがあります。
自動的に移る場合の事前通知
入力や選択に応じて自動的に移動する設計も、この基準で一律に禁止されているわけではありません。例えば「講座を選ぶと、その講座の申込ページへ移ります」と、選択欄を使う前に知らせる方法があります。操作したあとに表示する通知では間に合いません。
図では、利用者が選び直してから進めるように、選択と実行を分ける方法を採用しました。すべての設定変更に確認ボタンを求める要件ではありません。
内容の更新との違い
別のページやウィンドウへの移動、ほかの部品へのフォーカス移動、ページの意味が変わるほど大きな内容の入替えなどを「コンテキストの変化」と呼びます。
例えば「同行者あり」を選ぶと、すぐ下に同行者名の入力欄が増える場合があります。画面全体の構造や作業状況を保ち、フォーカスもそのままであれば、内容が増えただけでコンテキストの変化とは限りません。入力に応じた更新をすべて止める基準ではありません。
関連する基準との違い
3.2.1「フォーカス時」は部品がフォーカスを受け取っただけで起きる変化を扱います。3.2.1にはこの基準にある事前通知の例外はありません。
入力欄の目的や入力方法を伝えることは、3.3.2「ラベル又は説明」でも確認します。
参照資料
- WCAG 2.2 本体：3.2.2 On Input（要件）
- WAIC：3.2.2 入力時の解説
- W3C：Understanding On Input（英語公開版）
- W3C：G80 ボタンで画面の切替を始める例
- W3C：G13 設定の変更による移動を事前に知らせる例
出典の最終確認: 2026-11-09。