HTML
It is an attribute that tells screen readers how urgently to announce changes in dynamically updated regions.
aria-live 属性
動的に変わる部分(チャットの新着メッセージやフォームのエラー表示など)をスクリーンリーダーに「ここが更新された」と伝えるための仕組みです。値によって“どれくらい急いで読み上げるか”を指示できます。
- off(既定)
- 更新しても読み上げない
- 補助的な装飾だけが変わる場合
- polite
- ユーザーの操作が一区切りついてから読み上げ
- チャットの着信、検索結果数の変化
- assertive
- 進行中の読み上げを中断してすぐ読み上げ
- 重要なエラーメッセージ、タイマー終了通知
ポイント
- 属性を付ける場所
- 更新されるコンテナ要素(例:
<div aria-live="polite">
)に設定します。子要素が書き換わるたびにスクリーンリーダーが反応します。
- JavaScriptとの組み合わせ
- JSでテキストを差し替えるだけで OK。追加の API 呼び出しは不要です。
- 使いすぎ注意
- 頻繁な更新を
assertive
で多用すると、読み上げが連続してユーザーが混乱します。重要度に応じて polite
と使い分けましょう。
要するに 「画面のどこが新しく変わったかを支援技術に優しく知らせるための信号」 だと覚えておけば大丈夫です。