Level AAWCAG 2.2
4.1.3 ステータスメッセージ
ステータスメッセージがフォーカスを受け取らなくても支援技術に伝えられる。
なぜ重要か
スクリーンリーダー
ステータスメッセージがライブリージョンにないと、成功・エラー・進捗の通知が読み上げられません。
ECサイト
「カートに追加しました」等のフィードバックが伝わらないと、操作が成功したか確認できません。
フォーム
バリデーションエラーや送信完了メッセージが通知されないと、次のアクションがわかりません。
動的コンテンツ
検索結果件数の更新、ローディング状態など、ページ遷移なしの変化を伝える必要があります。
ライブデモ
ステータスメッセージ通知
サンプル商品
¥1,980（税込）
メッセージは視覚的に表示されますが、スクリーンリーダーには通知されません。
コード:
コード:
<div>カートに追加しました</div>ペルソナで理解する
鈴木さん（29歳）— 全盲・スクリーンリーダー使用
オンラインショップで「カートに追加」ボタンを押しても何も読み上げられません。本当に追加されたのか不安で、カートページに毎回移動して確認しています。role='status'があれば、ボタンを押した瞬間に「カートに追加しました」と読み上げられるのに。