適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
フォームに入力したり、要素にフォーカスを当てたりしただけで、お客さまが意図しない画面遷移や送信が発生しないようにする。
具体的な実装方法
3.2.1 A
1. ⭕️良い例
コンテキストを変化させる機能は、利用者が明示的にアクティベート（クリック、Enterキーの押下など）したときにのみ実行されるようにします。
ポイント:
- ページ遷移やフォームの送信は、
<button>要素や<input type="submit">など、明確な実行ボタンを介して行います。 - ポップアップウィンドウやダイアログは、利用者がボタンなどをクリックした結果として表示します。
実装例 (HTML & JavaScript):
<!-- 良い例: ボタンをクリックしてフォームを送信する -->
<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<button type="submit">送信</button>
</form>
<!-- 良い例: リンクをクリックして新しいウィンドウを開く -->
<a href="help.html" target="_blank">ヘルプ（新しいウィンドウで開きます）</a>2. ❌悪い例
onfocusイベントでポップアップを表示:
- 入力フィールドにフォーカスが当たった瞬間に、JavaScriptの
onfocusイベントを使ってヘルプ用のポップアップウィンドウを開く。
onfocusイベントでフォームを送信:
- ある要素にフォーカスが移動したことをトリガーにして、フォームを自動的に送信する。
なぜ問題なのか: これらの実装は、利用者が単にページ内を移動しているだけで、意図しない動作を引き起こします。これは「フォーカスを当てる」という行為が、何かを実行するという明確な意図ではないためです。
改善策:
onfocusやonblurといったイベントハンドラで、コンテキストを変化させる処理を実装しないようにします。- コンテキストの変化は、
onclickイベントやフォームのsubmitイベントなど、利用者の能動的なアクションに紐付けます。
3. プラットフォーム別の実装
Webページでは、JavaScriptのイベントハンドラの使い方に注意を払うことで達成します。特にonfocusイベントの使用を避けることが重要です。
4. 特殊なケースへの対応
この達成基準に例外はありません。コンテキストの変化は、常に利用者が予測可能で、意図した操作の結果として生じるべきです。
3.2.2 A
1. ⭕️良い例
フォームの送信やページの更新といったコンテキストの変化は、利用者が明示的に「送信」や「更新」といったボタンをクリックしたときにのみ実行されるようにします。
ポイント:
- フォームの最後には、必ず
<input type="submit">や<button type="submit">などの送信ボタンを配置します。 - ユーザー設定の変更なども、「保存」ボタンを押すことで初めて適用されるように設計します。
実装例 (HTML & JavaScript):
<!-- 良い例: 送信ボタンを押して初めてフォームが送信される -->
<form action="/search" method="get">
<label for="category">カテゴリ:</label>
<select id="category" name="cat">
<option value="tech">テクノロジー</option>
<option value="sports">スポーツ</option>
</select>
<button type="submit">検索</button>
</form>2. ❌悪い例
onchangeイベントでフォームを自動送信:
- セレクトボックスの選択肢を変更した瞬間に、JavaScriptの
onchangeイベントを使ってフォームを自動的に送信する。
チェックボックスの選択でページをリダイレクト:
- チェックボックスをオンにしただけで、別のページに移動させる。
なぜ問題なのか: これらの実装は、利用者がまだ入力の途中であるにもかかわらず、コンテキストを強制的に変更してしまいます。利用者は、すべての入力を終えてから自分の意思で送信するという一般的な操作フローを期待しており、それに反する挙動は混乱を招きます。
改善策:
onchangeイベントハンドラ内で、コンテキストを変化させる処理（form.submit()やlocation.hrefの変更など）を実装しないようにします。- すべてのフォームには、アクションを実行するための送信ボタンを設けます。
3. プラットフォーム別の実装
Webページでは、JavaScriptのonchangeイベントハンドラの使い方に注意を払うことで達成します。
4. 特殊なケースへの対応
この達成基準に例外はありません。ただし、コンテキストが変化することを事前によく説明してあれば、この限りではありません。しかし、最も良いプラクティスは、常に送信ボタンを用意することです。
確認観点
3.2.1 A
1. 定量的な基準の担保
自動チェックツールでの確認:
- この達成基準を完全に自動で検証することは困難です。イベントハンドラ内の処理内容までを正確に判断できないため、手動での確認が不可欠です。
チェックリストの達成度:
2. 定性的な基準の担保
レビュー:
- JavaScriptコードのレビューにおいて、
onfocus、onblurなどのイベントハンドラがコンテキストを変化させる処理（window.open,form.submit()など）を呼び出していないかを確認します。
専門家による監査:
- アクセシビリティ専門家が、キーボードのみですべての機能を操作し、フォーカス移動によって予期せぬ動作が起きないかを実際にテストします。
3.2.2 A
1. 定量的な基準の担保
自動チェックツールでの確認:
- この達成基準も、イベントハンドラ内のロジックに依存するため、自動ツールでの完全な検証は困難です。手動でのテストが中心となります。
チェックリストの達成度:
2. 定性的な基準の担保
レビュー:
- JavaScriptコードのレビューにおいて、
onchangeイベントハンドラがコンテキストを変化させる処理を呼び出していないかを確認します。
専門家による監査:
- アクセシビリティ専門家が、実際にフォームの各コントロールを操作し、送信ボタンを押すまではコンテキストの変化が起きないことを確認します。
- 支援技術を使って操作した際にも、同様に予測可能な動作をするかをテストします。