WCAG 2.2の達成基準4.1.3「ステータスメッセージ」（Level AA）は、画面上の結果や状態の変化を、フォーカスを移さずに支援技術へ伝えるための基準です。
ステータスメッセージとは、フォーム送信の成否、入力エラー、待機状態、処理の進行などを知らせる短い通知です。
画面にメッセージを表示するだけでは、スクリーンリーダーなどが変化を捉えられない場合があります。
そこで、HTMLの役割や状態を表す属性によって、通知の意味をプログラムから判別できるようにします。
達成基準4.1.3が求めること
プログラムによる判別とは、ブラウザーや支援技術が、マークアップから要素の役割や状態を読み取れることです。
フォーカスとは、キーボード操作や支援技術が現在対象としているリンク、ボタン、入力欄などの位置を指します。
達成基準4.1.3では、マークアップ言語で実装したコンテンツについて、次の二点を満たす必要があります。
- ステータスメッセージの役割や性質を、プログラムが判別できるようにする。
- メッセージへフォーカスを移さなくても、支援技術が利用者へ通知できるようにする。
通知のために利用者の操作位置を動かすのではなく、作業を続けられる状態のまま結果を伝えることが狙いです。
ステータスメッセージに含まれる通知
実装方法は、通知の内容と緊急度に合わせて選びます。
| 通知の種類 | 表示例 | 実装の候補 |
|---|---|---|
| 操作の成功や結果 | データを送信しました | role="status" |
| 入力エラーや警告 | メールアドレスの形式が正しくありません | role="alert" |
| 処理の進行状況 | ダウンロード進行中：50% | role="progressbar" |
| 順番に追加される記録 | 処理ログの更新 | role="log" |
roleやaria-liveを含むARIAの役割を整理したい場合は、ARIAの基本と注意点も参照してください。
通知内容に応じた実装
操作の成功や結果
保存や送信の完了など、利用者の作業を急いで中断する必要がない結果には、role="status"とaria-live="polite"を使用できます。
<div id="save-status" role="status" aria-live="polite">
データが正常に送信されました。
</div>メッセージを入れる要素は操作前からページに置き、処理が終わった時点でその中の文言を更新します。
通知を受け取るためだけに、送信ボタンや入力欄からフォーカスを移す必要はありません。
入力エラーや警告
入力を直さなければ処理を続けられないエラーなど、早く知らせる必要がある通知にはrole="alert"を使用できます。
<label for="email">メールアドレス</label>
<input type="email" id="email" required
aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">
メールアドレスの形式が正しくありません。
</p>この例では、aria-describedbyによって入力欄とエラー文を関連付け、aria-invalid="true"で現在の入力が無効であることを示しています。
フォーム全体の設計は、入力支援とエラー表示の実務ポイントで確認できます。
処理の進行状況
完了までの割合が分かる処理には、現在値と範囲を持つrole="progressbar"を使用できます。
<div role="progressbar"
aria-label="ダウンロードの進行状況"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
50%
</div>画面には割合を表示し、支援技術には何の進行状況か分かる名前と現在値を伝えます。
複数の処理結果が時系列で追加される場合は、role="log"を使って更新部分を示せます。
<div role="log" aria-live="polite">
<p>ファイル1を処理しました。</p>
<p>ファイル2を処理しています。</p>
</div>実装時に避けたい失敗
見た目だけで通知する
文字や色だけを画面に追加しても、その変化の意味を支援技術が判別できるとは限りません。
通知を入れる要素へ、内容に合うroleやaria-liveを設定します。
通知先を更新時に初めて作る
メッセージと通知先の要素を同時に追加すると、環境によっては更新として認識されないことがあります。
通知先の要素をあらかじめ用意し、操作後に文言を追加または更新する構成にします。
すべての通知をalertにする
role="alert"を通常の完了報告や細かな進捗にも使うと、利用者の作業を頻繁に中断させます。
急を要しない結果にはrole="status"やaria-live="polite"を選びます。
読み上げの確認を自動検査だけで終える
自動検査ツールは、不正な属性や不足している名前を見つける補助になります。
しかし、通知のタイミング、読み上げる文言、フォーカスが維持されるかどうかは、実際の操作とスクリーンリーダーで確認する必要があります。
ステータスメッセージの確認手順
- スクリーンリーダーを起動し、通知を発生させるボタンや入力欄へフォーカスを置く。
- 送信、保存、入力確認などの操作を実行する。
- 画面上に適切なメッセージが表示されることを確認する。
- フォーカスが移動しないまま、メッセージの内容が通知されることを確認する。
- 進捗や連続した更新では、必要な情報が欠けたり重複したりしないか確認する。
AxeやWAVEなどの自動検査ツールも併用し、role、aria-live、アクセシブルな名前の設定漏れを確認します。
実装の要点
- 成功、エラー、待機、進行状況のうち、何を知らせる通知かを最初に決める。
- 通知の内容と緊急度に合う
roleやARIA属性を選ぶ。 - 通知先をあらかじめ用意し、その中の文言や値を更新する。
- 見た目の確認、自動検査、スクリーンリーダーによる操作確認を組み合わせる。
ステータスメッセージを正しく実装すると、利用者は現在の操作位置を保ったまま、処理の結果や進行状況を把握できます。
Webアクセシビリティの改善を進める方へ
当社では、Webアクセシビリティの導入を支援するUUU ウェブアクセシビリティを提供しています。
サイトのアクセシビリティ向上を検討している方は、サービスの詳細をご覧ください。