WAI-ARIA 1.2Roles

ライブリージョンロール

ライブリージョンロールは、ページ上で動的に変化するコンテンツを スクリーンリーダーに自動的に通知するための仕組みです。 フォームのバリデーションエラー、保存完了メッセージ、チャットの新着通知など、 ユーザーが知るべき変更を支援技術に伝えます。

ライブリージョンロール一覧

ロール説明暗黙の aria-livearia-atomic使用例
alert重要かつ緊急なメッセージ。エラー通知や警告に使用。assertivetrueフォーム送信エラー、セッション切れ警告
status状態の変化を通知するメッセージ。緊急性は低い。politetrue「保存しました」「3件の結果」
log時系列で追加される情報のログ。チャットや操作履歴。politefalseチャットメッセージ、アクティビティログ
timerカウントアップ/ダウンするタイマー表示。off—残り時間表示、経過時間
marquee頻繁に変更される非必須の情報。株価ティッカーなど。off—ニュースティッカー、株価表示

aria-live 属性の値

aria-live="off"緊急度: なし

変更を通知しない（デフォルト）。ユーザーがその領域にフォーカスした場合のみ読み上げ。

aria-live="polite"緊急度: 低

現在の読み上げが完了してから変更を通知する。ほとんどのケースで推奨。

aria-live="assertive"緊急度: 高

現在の読み上げを中断して即座に通知する。緊急のメッセージのみに使用。

インタラクティブデモ

ライブリージョン体験デモ

スクリーンリーダー出力シミュレーション
上のボタンを押すとアナウンスが表示されます...
alert は aria-live="assertive"（即座に読み上げ）、status と log は aria-live="polite"（現在の読み上げ完了後に読み上げ）です。 ボタンを押して各ロールの違いを確認しましょう。

実装パターン

alert — エラー通知
<!-- ページ読み込み時から要素を配置 -->
<div role="alert" aria-live="assertive">
  <!-- JS でメッセージを挿入 -->
</div>

<script>
  function showError(msg) {
    document.querySelector('[role="alert"]')
      .textContent = msg;
  }
</script>
status — 保存完了通知
<div role="status" aria-live="polite">
  <!-- 保存完了時にメッセージを挿入 -->
</div>

<script>
  async function save() {
    await api.save(data);
    document.querySelector('[role="status"]')
      .textContent = '保存しました';
  }
</script>
log — チャットメッセージ
<div role="log" aria-live="polite" aria-relevant="additions">
  <!-- 新着メッセージが追加されるたびに通知 -->
  <div>ユーザーA: こんにちは</div>
  <div>ユーザーB: はじめまして</div>
</div>

ベストプラクティス

ライブリージョン要素はページ読み込み時にDOMに存在させる（動的追加では通知されない場合がある）
assertive は本当に緊急な場合のみ使用。多用するとユーザー体験が悪化する
aria-atomic="true" を使うと、変更時にリージョン全体が読み上げられる
aria-relevant で通知する変更の種類を制御できる（additions, removals, text, all）
視覚的にも変更を表示する — ライブリージョンはスクリーンリーダー専用ではない