role="log"需严格满足时间有序、仅追加、不可编辑删除，必须用appendChild()或append()动态插入，禁用innerHTML等重写操作，配合aria-label和正确DOM结构，兼容性差时降级为aria-live="polite"。
role="log" 适合聊天消息区域，但前提是内容严格满足时间有序、仅追加、不可编辑或删除——不是“长得像日志”就能用，而是向屏幕阅读器做出行为承诺。
为什么不能直接 innerHTML += 追加消息？
因为 innerHTML += 实际上会销毁旧 DOM 节点再重建，导致辅助技术（AT）丢失上下文，把整块内容当作全新日志重读，历史消息会被重复播报。
- 必须用
appendChild()或append()动态插入新节点到容器末尾 - 禁止使用
replaceChildren()、innerHTML = ...、outerHTML等重写整个子树的操作 - React/Vue 中需确保渲染逻辑最终落到真实 DOM 的追加行为上，而非虚拟 DOM diff 后的整块替换
DOM 结构和配套属性怎么写才有效？
单容器 + 正确 role + 显式语义声明，缺一不可。漏掉 aria-label 或错误嵌套，role="log" 就形同虚设。
- 只在一个父容器（如
<div>或<section>）上设role="log"，不要给每条消息单独设 - 必须提供
aria-label（如aria-label="聊天记录"），或用aria-labelledby指向可见标题 - 每条消息内部禁用
role="log"、role="alert"等冲突角色；可设aria-live="off"防止子元素触发额外播报 - 不要同时写
role="log"和aria-live——语义重复，部分 AT（如 JAWS + Chrome）会忽略role="log"
兼容性差时怎么降级处理？
role="log" 在 VoiceOver macOS 和 NVDA + Firefox 中支持较好，但在 JAWS + Chrome 中几乎不生效。此时不能坐等，得主动降级。
立即学习“前端免费学习笔记（深入）”；
- 检测 AT 环境困难，稳妥做法是默认启用
aria-live="polite"+aria-relevant="additions"作为兜底 - 手动控制
aria-atomic="false"，避免整块刷新导致重复朗读 - 若消息含可交互元素（如“复制”按钮），追加后需显式调用
focus()或确保其tabindex="0"生效，否则键盘焦点可能卡住
真正起作用的从来不是那行 role="log"，而是 JS 追加消息那一行 container.append(msgEl) —— 语义靠声明，行为靠执行，两者断开，无障碍就失效。
