ライブリージョンの読み上げ順
「カートに追加」は aria-live=polite で今の読み上げが終わってから、エラーは role=alert（assertive）で割り込んで読まれる。帯に読み上げ中の文と待ち行列を可視化。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 成功・件数の更新は polite。ユーザーが今聞いている文を遮らないので、連打しても順番に届く
- エラーだけ assertive（role=alert）。割り込みは今の読み上げを捨てるので、本当に止めるべき事だけに使う
- ライブリージョンの要素は最初から DOM に置いておき、中身のテキストだけ差し替える。後から要素ごと足すと読まれないことがある
- 見た目の通知（トースト）とライブリージョンは別物。画面に出ていても aria-live が無ければ読み上げは起きない
コード（コピーして使えます）
<div class="lv-wrap">
<div class="lv-product">
<div class="lv-thumb" aria-hidden="true"></div>
<div class="lv-info"><strong>ひのきのまな板 M</strong><span>¥3,980・在庫あり</span></div>
</div>
<div class="lv-actions">
<button type="button" id="lv-add" class="lv-primary">カートに追加</button>
<button type="button" id="lv-fail" class="lv-secondary">送信して失敗させる</button>
</div>
<p class="lv-status" role="status" aria-live="polite" id="lv-polite"></p>
<p class="lv-alert" role="alert" id="lv-alert"></p>
<div class="lv-band">
<div class="lv-row"><span class="lv-tag">読み上げ中</span><span id="lv-now">（待機中）</span></div>
<div class="lv-progress" aria-hidden="true"><span id="lv-bar"></span></div>
<div class="lv-row"><span class="lv-tag">待ち行列</span><span id="lv-queue">—</span></div>
</div>
</div>