0Pricing
HTML Academy · レッスン

ライブリージョン aria-live aria-atomic aria-relevant

非同期更新を支援技術に通知します

「ライブリージョン aria-live aria-atomic aria-relevant」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

ライブリージョンとは

ライブリージョンとは、コンテンツが動的に更新されるページ内のセクションです。スクリーンリーダーはライブリージョンを監視し、ユーザーがフォーカスを移動しなくても変更を自動的に読み上げます。

ライブリージョンの作成

コンテナー要素にaria-liveを追加します：

<!-- Polite: announce when user is idle -->
<div aria-live="polite" id="notifications"></div>

<!-- Inject text to announce: -->
<script>
document.getElementById('notifications').textContent = '5 new messages';
// Screen reader announces: '5 new messages' when user pauses
</script>

aria-liveの値のまとめ

aria-liveの3つのレベル：

  • off — 読み上げません（ライブリージョンでない領域のデフォルト）
  • polite — ユーザーが話すのを一時停止したときに読み上げます
  • assertive — 直ちに読み上げ、現在の音声に割り込みます

aria-atomicの詳細

aria-atomic は、コンテンツが変更されたときに何を読み上げるかを制御します：

<div aria-live="polite" aria-atomic="false">  <!-- default -->
  Items in cart: <span id="count">3</span>
</div>
<!-- Only the changed span is announced: '4' -->

<div aria-live="polite" aria-atomic="true">
  Items in cart: <span id="count">3</span>
</div>
<!-- The entire div is announced: 'Items in cart: 4' -->

<!-- aria-atomic="true" gives more context but is more verbose -->

aria-relevantの値

aria-relevant は、どのDOMの変更が読み上げを発生させるかを指定します：

<!-- Default: additions text -->
<div aria-live="polite" aria-relevant="additions text">

<!-- Announce removals too: -->
<div aria-live="polite" aria-relevant="removals">

<!-- Announce everything: -->
<div aria-live="polite" aria-relevant="all">

<!-- Values: additions, removals, text, all
     'additions' = added nodes announced
     'removals' = removed nodes announced
     'text' = text content changes announced -->

定義済みのライブリージョンロール

一部のロールはaria-liveを暗黙的に設定します：

  • role="alert" — aria-live="assertive" + aria-atomic="true"
  • role="status" — aria-live="polite" + aria-atomic="true"
  • role="log" — aria-live="polite"
  • role="timer" — aria-live="off"
  • role="marquee" — aria-live="off"

ライブリージョンによる読み込み状態

読み込み中と完了の状態を読み上げます：

<div role="status" aria-live="polite" aria-atomic="true" id="load-status">
  <!-- empty initially -->
</div>

<script>
async function loadData() {
  document.getElementById('load-status').textContent = 'Loading...';
  const data = await fetchData();
  renderResults(data);
  document.getElementById('load-status').textContent =
    `${data.length} results loaded.`;
}
</script>

フォーム送信のフィードバック

フォーム送信状況を伝えるライブリージョン：

<form id="contact-form" novalidate>
  <input type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

<div role="status" aria-live="polite" id="form-status"></div>

<script>
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const status = document.getElementById('form-status');
  status.textContent = 'Submitting...';
  await submitForm(new FormData(form));
  status.textContent = 'Thank you! You are now subscribed.';
});
</script>

検索結果の件数

検索結果を動的に読み上げます：

<label for="search">Search</label>
<input type="search" id="search">

<div role="status" aria-live="polite" aria-atomic="true" id="results-count"></div>
<div id="results"></div>

<script>
let debounceTimer;
search.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const results = filterResults(search.value);
    renderResults(results);
    document.getElementById('results-count').textContent =
      `${results.length} results for "${search.value}"`;
  }, 300);
});
</script>

ライブリージョンのアンチパターン

次のようなライブリージョンの誤りを避けてください：

  • ライブリージョンを作成と破棄を繰り返さず、初期コンテンツを空にした状態で常に存在させます
  • aria-hidden領域の中にライブリージョンを配置しないでください
  • 通常の更新にassertiveを使用しないでください。操作を大きく妨げます
  • 更新を頻繁に読み上げないでください（検索結果の件数はスロットリングします）

ライブリージョンのテスト

ライブリージョンの読み上げをテストする方法：

  • VoiceOver（Mac：Cmd+F5）またはNVDA（Windows：Ctrl+Alt+N）を有効にします
  • 更新を発生させ、読み上げを確認します
  • タイミングを確認します：politeは待機し、assertiveは割り込みます
  • axe DevToolsでライブリージョンに関する問題が検出されないことを確認します

確認問題

aria-live assertiveとaria-atomic trueを暗黙的に設定するロールは何ですか？

まとめ：ライブリージョン

ライブリージョンの要点：

  • aria-live="polite" — ユーザーの操作の一時停止を待ちます
  • aria-live="assertive" — 直ちに割り込みます
  • aria-atomic="true" — 領域全体を読み上げます
  • role="alert" = assertive + atomic、role="status" = polite + atomic
  • ライブリージョンは常に存在させ、コンテンツをいったん消去してから設定します

よくある質問

「ライブリージョン aria-live aria-atomic aria-relevant」レッスンは無料ですか？

はい。「ライブリージョン aria-live aria-atomic aria-relevant」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「ライブリージョン aria-live aria-atomic aria-relevant」で何を学びますか？

非同期更新を支援技術に通知します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「ライブリージョン aria-live aria-atomic aria-relevant」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. トグルのaria-expandedとaria-controls
  2. aria-selectedとタブパターン
  3. ライブリージョン aria-live aria-atomic aria-relevant
  4. スクリーンリーダーでのテスト
← HTML Academyに戻る