JIS X 8341-3:2016の「予測可能」は、利用者が操作したときに何が起こるかを見通せ、ページを移っても同じ機能を同じように見つけられる状態を目指す考え方です。
選択肢を変えただけで別ページへ移動する、ページごとにメニューの順序が変わる、同じ機能の呼び方が変わるといった設計は、利用者の予想を崩します。
対応の中心は、操作の途中で大きな変化を不用意に起こさず、繰り返し現れる要素の順序と識別方法をそろえることです。
「予測可能」が対象にすること
文脈の変化とは、利用者が続けていた作業の場が切り替わるような大きな変化を指し、別ページへの移動、新しいタブの表示、ページの再読み込みなどが当てはまります。
フォーカスとは、キーボードなどで現在操作の対象になっているリンク、ボタン、入力欄などを示す状態です。
利用者がフォーカスを移しただけの段階と、ボタンを押して処理を実行した段階を分けると、意図しない画面遷移を防ぎやすくなります。
| 確認する観点 | 混乱を招く例 | 対応例 |
|---|---|---|
| 操作後の変化 | 項目にフォーカスしただけで別ページへ移動する | 実行用のボタンを用意し、利用者が変化を開始できるようにする |
| 入力時の変化 | 選択肢を変えた瞬間に画面が切り替わる | 選択と確定を分けるか、事前に起こる動作を伝える |
| ナビゲーション | ページごとに同じメニューの順序が変わる | 繰り返すナビゲーションの項目と順序をそろえる |
| 機能の識別 | 同じ機能がページによって別の名前で表示される | 同じ機能に一貫したラベルや説明を付ける |
実装で確認するポイント
フォーカスだけで画面を切り替えない
リンクや入力欄へフォーカスが移っただけで、別ページへの移動や新しいタブの表示を始めないようにします。
キーボードでページを移動する利用者は、操作対象を探すためにフォーカスを順番に動かすため、フォーカス自体を実行の合図にすると意図しない変化が起こります。
実装例や確認方法は、フォーカス時の動作に関する解説でも確認できます。
入力と処理の確定を分ける
プルダウンメニューや選択肢を変更した瞬間にページを移動させると、利用者が内容を確認する前に作業の場が変わってしまいます。
たとえば、移動先を選ぶプルダウンには「移動」ボタンを添え、選択した後に利用者が実行を確定できるようにします。
自動的な変化が必要な場合は、操作の前に何が起こるかを伝える方法も含めて検討します。
フォーム部品の扱いは、入力時の動作に関する解説に具体例があります。
繰り返すナビゲーションの順序をそろえる
ヘッダー、メニュー、ページ内ナビゲーションなどを複数のページで繰り返す場合は、同じ項目を同じ順序で見つけられるようにします。
ページごとにメニューの位置や順序が変わると、利用者は移動のたびに操作方法を探し直さなければなりません。
共通部品として管理し、主要なページを並べて比較すると、更新時に生じた不一致も見つけやすくなります。
設計時の考え方は、一貫したナビゲーションの解説で補足しています。
同じ機能を同じ表現で識別する
検索、問い合わせ、次のページへの移動など、同じ働きをする部品は、ページが変わっても一貫した名前や説明で示します。
同じ検索機能を「検索」「調べる」など別の名前で表示すると、利用者は同じ機能かどうかを判断し直すことになります。
一方で、異なる動作をする部品に同じラベルを付けると結果を予測できないため、ラベルは実際の動作に合わせます。
ラベルや代替テキストの考え方は、一貫した識別の解説で確認できます。
必要な画面更新を事前に伝える
新しいタブを開く、ページを自動で再読み込みするなどの動作は、必要性を確認したうえで、利用者が変化を予想できる案内を添えます。
処理に時間がかかる場合は「読み込み中」、完了した場合は「保存しました」のように、操作の結果と次の状態がわかるフィードバックを示します。
リンクには「こちらをクリック」のような曖昧な表現を避け、「申し込みフォームへ進む」のように移動先や動作がわかる文言を使います。
実装と運用のチェックリスト
- Tabキーでフォーカスを移しただけで、ページ遷移や大きな内容変更が起きないか。
- プルダウンやチェックボックスを変更した瞬間に、意図しない処理が実行されないか。
- 主要ページで、繰り返すメニューの項目と順序がそろっているか。
- 同じ機能のボタン、リンク、アイコンに一貫した名前や説明が付いているか。
- 新しいタブや自動更新が必要な場合に、動作を事前に伝えているか。
- 操作後に、処理中、完了、失敗などの状態が理解できるか。
実装者だけで判断せず、実際のページをキーボードで操作し、目的の情報や機能へ迷わず到達できるかを確認します。
複数のページをまたぐ操作では、ページ単体の検査だけでなく、移動前後の順序や呼び方も比較します。
判断を誤らないための整理
アクセシビリティに役立つ工夫が、すべて同じ要求事項に含まれるわけではありません。
リンクの文言を具体的にすることや操作結果を返すことは利用者の理解を助けますが、それだけで「予測可能」への対応を判断せず、フォーカス、入力時の変化、ナビゲーション、機能の識別を分けて確認します。
デザインの見た目をそろえるだけでも足りないため、実際に起こる動作と、利用者に伝わる名前の両方を点検します。
実装前に押さえる要点
- 操作の途中で、利用者が始めていない文脈の変化を起こさない。
- 入力内容の変更と、ページ移動や処理の確定を分ける。
- 繰り返すナビゲーションの項目と順序をそろえる。
- 同じ機能を一貫した名前や説明で識別できるようにする。
- 必要な変化は事前に伝え、操作後の状態を明確に示す。
この確認を設計、実装、更新時のレビューに組み込むと、利用者が操作方法を毎回推測し直す負担を減らせます。
当社では、既存サイトのアクセシビリティ改善を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
機能や導入方法を確認しながら、ナビゲーションやフォームの挙動も含めてサイト全体を点検してください。