html模版层无法监听动态变化，所有可访问性行为必须由javascript显式触发；模版仅负责声明语义（如aria-live、role）和初始状态，并提供id锚点供js操作。
不能靠模版层自动监听或播报动态交互区域——所有可访问性行为必须由JavaScript显式触发，模版层只负责声明语义和初始状态。
为什么HTML模版本身无法“监听”变化
HTML是静态标记语言，没有运行时能力。所谓“动态区域”，比如弹出通知、切换标签页、展开手风琴，其内容增删、状态变更都发生在DOM操作之后，模版层对此一无所知。屏幕阅读器不会主动轮询DOM，它只响应开发者通过ARIA属性（如aria-live）发出的明确信号。
-
aria-live不是监听器，而是“请辅助技术留意这个区域”的声明 - 模版里写
<div aria-live="polite"></div>只是预留一个播报通道，不写JS更新它的textContent或innerHTML，就永远没内容可播 - 原生元素如
<dialog></dialog>或<details></details>虽自带部分可访问性，但状态变更（如open切换）仍需JS同步设置aria-expanded等属性，否则屏幕阅读器可能滞后或误读
模版层必须做的三件事（缺一不可）
模版不是旁观者，它是可访问性链路的第一环。它要为JS提供可操作的锚点和语义基础：
- 用
role="status"或role="alert"声明区域用途，而非仅靠CSS类名或空div - 确保该区域有稳定、唯一的
id，供JS通过document.getElementById()精准定位并更新内容 - 初始状态设
aria-hidden="true"（若默认隐藏），避免屏幕阅读器提前读取空内容；JS显示时再设为false
示例：<div id="notification-area" role="status" aria-live="polite" aria-atomic="true" aria-hidden="true"></div>
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
JS更新时最容易漏掉的两个细节
即使模版写对了，JS更新逻辑错一步，播报就失效：
- 直接用
innerHTML = "新消息"会重置整个子树，若内部有button或input，焦点会丢失，且aria-hidden可能被覆盖——应优先用textContent更新纯文本，或用appendChild()/replaceChild()精细操作 - 更新后未调用
element.focus()（当需要键盘用户立即操作时），或未重置tabindex="-1"导致焦点无法进入——尤其在role="dialog"中，模态框打开后必须手动focus()到第一个可聚焦元素
测试时别只信Lighthouse报告
Lighthouse能检测aria-live是否存在，但无法验证它是否真被播报。真实验证必须：
- 用NVDA + Firefox 或 VoiceOver + Safari，手动触发交互，听是否播报、是否打断、是否完整
- 检查控制台是否有
aria-*属性被JS意外覆盖（比如某处写了el.setAttribute("aria-hidden", "false")，另一处又写了el.removeAttribute("aria-hidden")，结果变成aria-hidden=""，语义失效） - 滚动页面后再次触发，确认
getBoundingClientRect()类定位逻辑没影响播报区域（它不影响aria-live，但影响视觉反馈，间接干扰用户理解）
最常被忽略的点：aria-live区域的内容更新必须是“插入”或“替换”，而不是“追加到末尾却不清空旧内容”。残留的旧文本会让屏幕阅读器重复播报，造成混淆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
