3.2.1 フォーカス時

要件

ユーザーがコンポーネントにフォーカスを移動させたときに、自動的にコンテキストが変更されないようにすること。

「コンテキストの変更」とは？

以下のような変化を指します

• 新しいページに遷移する（例：リンクやボタンをフォーカスしただけで遷移する）
• コンテンツが大きく書き換わる（例：大量のセクションが自動展開）
• モーダルやポップアップが自動的に表示される
• 入力フォームの他項目が動的に書き換わる

具体例

達成している例	達成していない例
フォーカスしても、変化が起きず、Enterキー等で明示的に操作する必要がある	selectタグにフォーカスが当たっただけでページがリロードされる
ラジオボタンにフォーカス後、選択したタイミングで追加オプションが表示される	チェックボックスにフォーカスが当たっただけで、モーダルが表示される
メニューにフォーカスしても、操作しない限りサブメニューは開かない	ナビゲーションリンクにフォーカスすると、自動的にページが遷移する

この基準の目的

• キーボードユーザーの操作性を担保する
• スクリーンリーダー利用者が文脈を読み上げる間に意図せず画面が変わることを防ぐ
• 「なぜページが変わったのか」「なぜポップアップが出たのか」わからない混乱を避ける

実装上の注意点

• onfocus イベントでページ遷移やポップアップを起動しない
• select 要素で選択肢の変更＝自動送信を避ける（onchangeでも注意）
• 動的な変化がある場合は、Enterキーやクリック操作を明示的なトリガーにする

利点

• 予測可能なUIとなり、ユーザーの混乱を防止
• キーボード操作・音声読み上げのユーザーも安心して操作可能
• 視覚障害者や学習障害を持つユーザーにも優しい設計

まとめ

項目	内容
達成基準	3.2.1 フォーカス時
等級	A
要件	フォーカスによって自動的にコンテキストを変えない
対象	キーボード・支援技術利用者
NG例	フォーカスしただけでページ遷移やUI変更が起きる
実装の注意	onfocus, onchange による自動処理を回避

一覧に戻る