LEARN BY EXAMPLE

4.1.3 ステータスメッセージ レベル AA

検索件数や完了の通知を、フォーカスを移さなくても受け取れるようにする。

概要

HTMLなどのマークアップ言語で作るコンテンツでは、ステータスメッセージを役割やプロパティでソフトが取得できるようにします。通知にフォーカスを移さなくても、支援技術が利用者に提示できるようにします。

検索の結果を、操作位置を変えずに受け取る

PCやスマートフォンで講座サイトを検索する場面です。画面上の件数と、支援技術が受け取れる通知を比べます。

利用者が困る例 件数が変わっても通知されない

完了や件数を知るために、結果の場所を読み直す。
画面には結果が表示されても、新しい通知として受け取れません。

改善した例 件数を状況の通知として伝える

「写真」や「文章」を入力して検索できます。どちらにも当てはまらない語を検索すると、0件と表示します。

講座サイトの検索

講座一覧:2件

  • 写真入門
  • 文章の書き方

件数の領域:role="status"
通知全体:aria-atomic="true"

検索の操作位置にいたまま、結果を受け取れる。
通知へフォーカスを移さず、支援技術に検索語と件数を伝えます。

図:検索件数に通知の指定がない場合と、状況を伝える役割を付けた場合の比較。問題側は静止図です。改善側は図内の2講座を検索できます。読み上げの確認には、スクリーンリーダーなどの支援技術を使います。

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

画面を見ることができない人が、PCやスマートフォンのスクリーンリーダーを使い、講座サイトで「写真」を検索しています。「検索」を選ぶと、同じページに「検索結果:1件」と表示され、講座の一覧も更新されます。

しかし、この件数には通知の役割などが指定されていません。フォーカスは検索の操作位置に残り、利用者には新しい件数が伝わりません。検索が終わったのか、該当する講座がなかったのかを知るために、結果の場所まで読み進めて確認する必要があります。

達成するための改善例

同じ検索画面で、件数を表示する領域に、更新前からrole="status"を指定します。これは、結果や状況を伝える通知の役割です。「『写真』の検索結果:1件」のように、何についての件数かも含めて更新します。

この通知領域にはaria-atomic="true"も指定し、数字だけでなく通知全体を提示できるようにします。検索の操作位置にフォーカスを残したまま、対応する支援技術が検索の結果を知らせられます。

図の改善側では、検索語を入力して「検索」を選べます。件数と講座一覧が更新されても、フォーカスが通知へ移らないことを確認できます。実際の読み上げ方やタイミングは、支援技術や設定によって異なります。

確認のポイント

  • 表示の変化は、操作の成功・結果、待機、進行状況、又はエラーの存在を伝える通知ですか。
  • その通知は、ページ移動やフォーカス移動などのコンテキストの変化を伴わずに表示されますか。
  • 対象の通知を役割やプロパティなどでソフトが取得し、フォーカスを受け取らなくても提示できますか。
  • 更新された数字だけでなく、何の件数や状態かも伝わりますか。
  • 実際に使う支援技術で、通知を受け取れるか、必要以上に作業へ割り込まないかを確認しましたか。

条件と補足

ステータスメッセージの範囲

ステータスメッセージは、コンテキストの変化を伴わずに、次の情報を伝える内容の変化です。

伝える情報 例
操作の成功や結果 保存が完了した、検索結果が1件あった
アプリケーションの待機状態 読み込み中、処理を待っている
処理の進行状況 アップロードの進み具合
エラーの存在 入力に誤りが3件ある

検索結果の講座一覧そのものと、件数や「該当する講座はありません」という短い通知は区別します。一覧全体を読み上げ対象にすることを、この基準が一律に求めているわけではありません。

新しいページへの移動や、フォーカスを受け取るダイアログは、コンテキストの変化を伴うため、この通知の定義とは分けて扱います。メニューの開閉状態などは4.1.2「名前 (name)・役割 (role)・値 (value)」でも確認します。画面に追加される内容すべてが、ステータスメッセージになるわけではありません。

内容に合う通知方法

role="status"は、結果や状況を伝える方法の一例です。エラーや進行状況などでは、内容と必要な緊急度に合う役割・プロパティを選びます。すべての通知をrole="alert"やaria-live="assertive"で割り込ませると、読み上げ中の情報を妨げる場合があります。

通知に関する情報が役割から伝わる場合もあるため、すべてにaria-live属性を加えることが要件ではありません。利用する技術に合う方法で、支援技術へ提示できるかを確かめます。通知を受け取るために、操作中の部品から通知へフォーカスを移す必要がないようにします。

通知の追加・変更・消去

新しく加える文字だけでなく、既存の「0件」を「1件」に変える場合や、処理中のアイコンが消える場合も、伝わる情報を確認します。「処理中」が消えたことが完了を意味するなら、その状態も支援技術に伝えます。アイコンや音で状態を伝える場合は、意味を伝えるテキストによる代替も確認します。

この基準は、新しい通知を必ず作るよう求めるものではありません。ステータスメッセージを提供している場合に、画面を見られない利用者などにも、その情報を提示できるようにする基準です。

参照資料

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