role="log" 本身不触发读屏播报，必须配合 aria-live="polite" 或 aria-live="assertive" 并通过 DOM 变更（如 appendChild）更新内容才能生效；console.log 与可访问性无关。
role="log" 本身不会触发读屏播报
设置 role="log" 只是告诉辅助技术“这是一个动态更新的日志区域”，但读屏软件（如 NVDA、VoiceOver）是否播报、何时播报、报什么内容，完全取决于你后续的 DOM 变更方式和 ARIA 属性配合。单纯加个 role="log"，控制台 console.log() 输出再多，读屏器也毫无反应——它不监听 JS 控制台。
必须用 DOM 插入 + aria-live 才能触发播报
role="log" 通常要搭配 aria-live="polite" 或 aria-live="assertive" 才生效。读屏器只监听该元素内文本节点或子元素的变更（如 appendChild、textContent 修改），而非 JS 日志。
-
aria-live="polite"：等当前语音说完再播，适合普通日志（推荐） -
aria-live="assertive"：立即中断当前播报，适合错误或关键提醒（慎用，易打断用户） - 不要同时设
role="log"和aria-live="off"，这会禁用播报 - 确保插入的内容是可访问的文本（避免仅用
aria-label而无实际文本节点）
示例：
<div role="log" aria-live="polite" id="logger"></div>
然后 JS 中这样更新：
立即学习“前端免费学习笔记（深入）”；
const logger = document.getElementById('logger');<br>const entry = document.createElement('div');<br>entry.textContent = '操作成功';<br>logger.appendChild(entry); // 触发播报
为什么 console.log 不影响读屏器
浏览器控制台输出和可访问性树完全隔离：console.log() 写入的是开发者工具的 Console 面板，不是 DOM，也不触发任何 ARIA 生命周期事件。读屏器根本不“看”控制台——它只解析渲染树 + ARIA 属性 + 焦点状态。
- 常见误解：以为给
<script>加role="log"就能捕获console.log——无效 - 想调试读屏行为？用 Chrome 的“Accessibility”面板检查元素是否出现在可访问性树中
- 某些自动化测试工具（如 axe）会检查
aria-live是否被正确设置，但不会校验控制台输出
容易忽略的兼容性细节
不同读屏器对 role="log" 的支持程度不同，实际体验差异大：
- VoiceOver（macOS/iOS）：基本支持，但需元素有明确尺寸或
display: block，否则可能跳过 - NVDA（Windows）：依赖
aria-live，且对快速连续更新（如 100ms 内多次appendChild）会合并播报，不是每条都念 - JAWS：部分旧版本忽略
role="log"，只认aria-live，建议始终显式声明 - 不要用
innerHTML +=更新日志区——这会重置整个子树，导致读屏器丢失上下文或重复播报
真正起作用的是 DOM 变更节奏和语义完整性，不是标签名本身。一个没设 role 但带 aria-live 的 <div>，往往比设了 role="log" 却没设 aria-live 的元素更可靠。
