4.1.3 ステータスメッセージ

要件

状態メッセージが表示されたとき、それがフォーカスを移動せずにプログラムによって決定可能となり、支援技術がそれをユーザーに通知できること。

用語解説

用語	定義
ステータスメッセージ	入力完了・エラー・処理成功・失敗などの現在の状態を示す動的なテキスト
プログラムによって決定可能	スクリーンリーダーなどの支援技術がその情報を認識・読み上げられる構造になっていること
フォーカスを移動せずに	ユーザーの現在の入力位置や操作中の箇所を邪魔しないこと

よくあるステータスメッセージの例

状況	メッセージ例
フォーム入力後のエラー表示	「メールアドレスは必須項目です」
保存完了の通知	「保存が完了しました」
Ajax による検索結果の件数表示	「10件の検索結果が見つかりました」
入力チェック完了メッセージ	「パスワードは使用可能です」

実装のポイント

達成には以下の条件を満たす必要があります

条件	説明
メッセージがDOMに追加される	JavaScriptで生成されたテキストであってもHTMLに挿入されること
支援技術に通知される	aria-live などで自動的に読み上げられる仕組みになっていること
フォーカス移動が不要	ユーザーが入力中でも、勝手にフォーカスを動かさず、自然に読み上げること

実装例

成功例（aria-liveを使用）

<div aria-live="polite" class="status-message" id="form-status">
  入力内容に不備があります。
</div>

• aria-live=”polite”：控えめに（現在の読み上げが終わってから）読み上げる
• aria-live=”assertive”：即時読み上げ（緊急性が高いエラーなどに）

失敗例

<!-- メッセージが画面上に表示されても、支援技術が読み取れない例 -->
<div class="status-message" style="color:red;">
  エラーがあります。
</div>

• aria-liveなどが設定されていないため、スクリーンリーダーには伝わらない。

テスト方法（チェックリスト）

項目	確認内容
動的に表示されるメッセージがあるか	フォーム送信やAjax操作など
aria-live属性が設定されているか	aria-live="polite" など
メッセージの内容がHTMLに出力されているか	JavaScriptで挿入されている
メッセージ表示に伴ってフォーカスが移動しないか	入力欄にフォーカスがあるままか
スクリーンリーダーで読み上げられるか	NVDA, VoiceOver等で確認可能

利点

観点	内容
視覚障害者の支援	入力エラーや完了通知が即時音声で伝わる
利用者の安心感	「何が起こったのか」が分からない不安を軽減
ユーザビリティ	一貫した操作性で気付きやすく、誤操作を防ぐ設計に繋がる

まとめ

項目	内容
達成基準名	4.1.3 ステータスメッセージ（Level AA）
主な対象	フォーム、入力フィードバック、非同期メッセージなど
実装方法	aria-live, aria-atomic, DOM挿入などを適切に使う
禁止事項	メッセージのみに色や位置で意味を持たせる、focus移動

一覧に戻る