LEARN BY EXAMPLE
4.1.3 ステータスメッセージ レベル AA
検索件数や完了の通知を、フォーカスを移さなくても受け取れるようにする。
概要
HTMLなどのマークアップ言語で作るコンテンツでは、ステータスメッセージを役割やプロパティでソフトが取得できるようにします。通知にフォーカスを移さなくても、支援技術が利用者に提示できるようにします。
達成できないと起こる問題の例
画面を見ることができない人が、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件」に変える場合や、処理中のアイコンが消える場合も、伝わる情報を確認します。「処理中」が消えたことが完了を意味するなら、その状態も支援技術に伝えます。アイコンや音で状態を伝える場合は、意味を伝えるテキストによる代替も確認します。
この基準は、新しい通知を必ず作るよう求めるものではありません。ステータスメッセージを提供している場合に、画面を見られない利用者などにも、その情報を提示できるようにする基準です。
参照資料
- WCAG 2.2 本体:4.1.3 Status Messages(要件)
- WCAG 2.2 本体:ステータスメッセージの定義
- WAIC:4.1.3 ステータスメッセージの解説
- W3C:Understanding Status Messages(英語公開版)
- W3C:ARIA22 role="status"で通知を提示する方法
- W3C:F103 通知を役割やプロパティで取得できない失敗例
テクニックは達成する方法の例です。出典の最終確認: 2026-11-09。講座サイトは、この教材のために作った架空の例です。