LEARN BY EXAMPLE

3.2.5 要求による変化 レベル AAA

画面の大きな切替を、利用者が自分で始められるようにする。

概要

別の画面への移動やフォーカスの移動など、コンテキストの変化は利用者の要求によってだけ起こるようにするか、その変化を止める仕組みを利用できるようにします。利用者が、どのタイミングで作業状況を変えるかを制御できることが必要です。

講座を選び終えてから、申込方法へ進む

PCやスマートフォンで希望する講座を選ぶ場面です。選ぶだけで移る場合と、自分で進む場合を比べます。

利用者が困る例 講座を選ぶだけで画面が変わる

講座を比べる途中で、選択欄から離れてしまう。
移動を止められず、別の講座を選ぶには元の画面へ戻る必要があります。

改善した例 選択と、進む操作を分ける

講座サイト

希望講座の選択

選ぶだけでは画面は変わりません。ボタンで図内の申込方法へ進みます。

写真入門の申込方法

連絡先を入力し、内容を確認して申し込みます。

ここでは申込方法の表示だけを試せます。実際の入力や送信へは進みません。

選び直してから、自分で次の画面へ進める。
利用者が進むボタンを実行するまで、選択欄とフォーカスを保ちます。

図:問題側は静止図です。改善側は選択と画面切替を試す図内の見本で、進むと申込方法の見出しへ、戻ると講座の選択欄へフォーカスを移します。外部送信は行いません。

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

スクリーンリーダーを使う人が、PCやスマートフォンで講座サイトを開き、希望する講座を比べています。選択欄で講座を選んだだけで、その講座の申込方法へ画面が切り替わり、フォーカスも移ります。

利用者は別の講座も確かめたいのに、選択欄から離れてしまいます。移動を止める設定もなく、選び直すために元の画面へ戻る必要があります。

達成するための改善例

同じ選択欄で、講座を選ぶだけでは画面を切り替えないようにします。「選んだ講座の申込方法へ進む」ボタンを用意し、利用者が選び終えてから実行します。

利用者はその場で選び直し、自分が進みたいときに申込方法へ移れます。選択と移動を分けるほか、利用者が自動的な変化を止められる設定を用意する方法もあります。両方を同時に求める要件ではありません。

図の改善側では、講座を選ぶだけでは画面が変わらないことと、ボタンで申込方法へ進む流れを試せます。変わるのは図内の表示だけで、外部への送信や申し込みは行いません。

確認のポイント

  • 別の画面・ウィンドウへの移動、フォーカスの移動、大きな内容の入替えなどを確認しましたか。
  • それぞれの変化は利用者が明確に要求したものですか。又は、利用者が止める仕組みを使えますか。
  • 入力や選択を確かめている途中に、画面が切り替わりませんか。
  • 一つの操作で複数の変化がある場合、それぞれを利用者が要求しているか確認しましたか。
  • 事前に知らせるだけで、このAAAの要件を満たしたことにしていませんか。

条件と補足

コンテキストの変化とは

ウェブページ全体を一度に見られない利用者が、気づかないと混乱するような大きな変化です。別のページやウィンドウへの移動、別の部品へのフォーカス移動、ページの意味を変えるほどの内容の入替えなどが含まれます。

内容が増えたり変わったりするだけで、必ずコンテキストの変化になるわけではありません。例えば、同じ場所に説明を開くことや、選択に応じて次の選択肢を更新することは、作業状況やフォーカスを保つ場合、コンテキストを変えずに行えることがあります。

要求に応じて変えるか、変化を止められるようにする

「進む」「今すぐ更新」など、何を実行するか分かる操作で利用者が変化を始める方法があります。自動で変える機能を用意する場合も、利用者がその変化を止められる仕組みがあれば対応できます。利用者の設定が許可するときだけ自動で変化する方法も、公式解説で示されています。

この基準は、すべての内容を固定したり、すべての入力の後に確認ボタンを置いたりするものではありません。コンテキストを変える動作を特定し、利用者が制御できることを確認します。

事前に知らせることとの違い

3.2.2「入力時」では、入力や選択による自動的なコンテキストの変化を、部品を使う前に知らせる方法も認めています。3.2.5では、知らせるだけで十分とはせず、利用者の要求による変化か、その変化を止める仕組みがあることを確認します。

リンクで新しい内容を開く要求と、新しいウィンドウやタブを開く要求は分けて考えます。複数の変化を同時に起こす場合、それぞれが利用者の要求に沿うかを確認します。H83は、新しいウィンドウで開くことをリンクの文字などで伝え、利用者の要求で開く方法の一例です。

更新や割り込みの基準との関係

2.2.4「割り込み」は、緊急ではない割り込みを延期・抑制できることを扱います。3.2.5では、画面や作業状況を大きく変える動作について、要求に応じて始めるか、止められることを確認します。

図では、利用者が要求した画面切替に合わせて見出しへフォーカスを移します。選択欄の値を変えただけでは移さず、戻る操作では同じ選択欄へ戻します。

参照資料

テクニックは方法の例です。出典の最終確認: 2026-11-10。講座サイトは、この教材のために作った架空の例です。