怎么利用HTML的aria-live属性创建实时区域自动播报内容变化-html教程-PHP中文网

aria-live="polite"在当前播报结束后读新内容，适合通知类更新；aria-live="assertive"立即中断播报，仅用于紧急提示。需确保区域初始可见、已挂载dom，并配合append或insertadjacenthtml控制只读新增内容。

怎么利用html的aria-live属性创建实时区域自动播报内容变化

aria-live="polite" 和 aria-live="assertive" 有什么区别

关键看内容变化是否需要立即打断用户当前操作。用 aria-live="polite" 时，屏幕阅读器会在当前播报自然结束后再读新内容；而 aria-live="assertive" 会立刻中断当前语音、强制播报，适合错误提示或紧急状态变更。

常见误用是把所有动态更新都设成 assertive，结果用户正在听表单说明，突然被“提交成功”打断两次——实际多数场景用 polite 更友好。

polite：适合通知类更新（如搜索结果数、加载进度百分比）
assertive：只用于必须立即获知的内容（如“验证码错误，请重试”）
避免在频繁更新的区域（如每秒刷新的计时器）使用 assertive，会导致语音轰炸

怎么让屏幕阅读器只读新增内容，而不是整个区域重读

默认情况下，只要区域内容变化，aria-live 区域会被整体重新播报。要控制只读新增部分，得配合 DOM 操作策略：

用 appendChild() 或 insertAdjacentHTML("beforeend", ...) 往区域末尾追加新节点，而非替换 innerHTML
确保新增节点有明确语义（比如用 <p></p> 或 <div role="status">），避免纯文本拼接 <li>如果必须替换内容，先清空再写入时，加个短暂停顿（<code>setTimeout(() => { el.textContent = newText; }, 10)），能减少重复播报

例如：

<div aria-live="polite" aria-atomic="false" id="live-region"></div>

document.getElementById("live-region").insertAdjacentHTML("beforeend", "<p>新消息已收到</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>")

<p></p>