LEARN BY EXAMPLE
3.2.1 フォーカス時 レベル A
フォーカスを受け取っただけで、別の画面や操作へ切り替えない。
概要
ボタンや入力欄などがフォーカスを受け取ったときに、別のページを開いたり、ほかの部品へフォーカスを移したりしないようにします。利用者が順に操作場所を確かめられるようにする基準です。
入力欄に移ったときのヘルプ
利用者が困る例 フォーカスだけでヘルプへ移る
入力欄を確認しただけで、ヘルプへ移される。
入力を続けるために、ヘルプを閉じて戻る必要があります。
改善した例 必要なときに案内を開く
入力欄でそのまま入力できる。
リンクを実行したときにだけ、下の案内へ移ります。
メールアドレスの書き方
連絡を受け取れるメールアドレスを入力します。例：sample@example.com
達成できないと起こる問題の例
キーボードを使う人が写真教室の申込欄をTabキーで順に確認します。「メールアドレス」欄に移っただけでヘルプのダイアログが開き、フォーカスもその中へ移ってしまいます。
利用者は入力欄を確かめたかったのに、ヘルプを閉じる操作が必要になります。読み上げや画面拡大を使う人も、予想外の移動があると、入力を続ける場所を見失うことがあります。
達成するための改善例
同じ入力欄で、フォーカスを受け取っただけでヘルプを開く動作をやめます。利用者はそのままメールアドレスを入力できます。ヘルプが必要なときに自分で案内へ進めるよう、「メールアドレスの書き方」リンクを別に置きます。
図の「改善した例」ではTabキーで入力欄、ヘルプへのリンク、参加者名の欄へ進めます。リンクに移っただけでは案内へ移動しません。Enterキーでリンクを実行すると、図の下にある案内へ移ります。
確認のポイント
- Tabキーで操作部品へ移っただけで、別のページやウィンドウが開きませんか。
- 入力欄をクリックしてフォーカスを移しても、入力欄からほかの部品へ勝手に移りませんか。
- フォーカスを受け取っただけでフォームを送信したり、別の画面に相当する内容へ切り替えたりしませんか。
- ページ移動や、フォーカスを移すヘルプの表示を、利用者がリンクやボタンを実行して始められますか。
条件と補足
コンテキストの変化
別のページやウィンドウを開く、ほかの部品へフォーカスを移す、ページの意味が変わるほど内容を入れ替えるなど、利用者の作業状況が大きく変わることを「コンテキストの変化」と呼びます。画面全体を一度に見られない人などが、変化に気づかず混乱することがあります。
内容の変化がすべてコンテキストの変化になるわけではありません。フォーカスを保ったまま短い説明を表示するなど、作業状況を変えない更新もあります。ホバーやフォーカスで追加内容を表示する場合は、1.4.13「ホバー又はフォーカスで表示されるコンテンツ」の条件も確認します。
フォーカスと実行の違い
フォーカスはキーボードなどで次に操作する対象を示します。Tabキーでリンクやボタンへ移ることと、Enterキーやクリックでそれを実行することは別の操作です。
例えばボタンをクリックすると、フォーカスを受け取ることとボタンの実行が同時に起こる場合があります。クリックした結果だけで判断せず、フォーカスを受け取るだけの操作でも同じ変化が起きるかを確認します。
関連する基準との違い
3.2.2「入力時」は文字の入力や選択などで設定を変えたときの自動的なコンテキストの変化を扱います。3.2.1はフォーカスを受け取ったときを扱い、事前に通知すれば変化を起こしてよいという例外はありません。
操作位置が見えるかは2.4.7「フォーカスの可視化」、移る順序は2.4.3「フォーカス順序」で確認します。
参照資料
- WCAG 2.2 本体：3.2.1 On Focus（要件）
- WAIC：3.2.1 フォーカス時の解説
- W3C：Understanding On Focus（英語公開版）
- W3C：G107 フォーカスを受け取ることと実行を分ける例
出典の最終確認: 2026-11-09。