全局监听 document.body 不适用于大型系统，因其会捕获 iframe 跨域节点、Shadow DOM、SSR 残留 DOM 等无关事件，导致噪音高、归因失败、防重失效且无法感知组件生命周期。
不能靠“补丁式加 aria-label”来应付合规审计，大型系统重构中可访问性埋点必须与 DOM 语义结构、组件生命周期、上报链路三者对齐，否则要么漏报、要么误报、要么拖慢首屏。
为什么全局监听 document.body 不适用于大型系统
在单页应用或微前端架构下，document.body.addEventListener('click', ...) 看似省事，但实际会捕获大量无关节点（如第三方 SDK 插入的浮动按钮、广告 iframe 内容、动态弹层遮罩），导致上报噪音高、过滤逻辑膨胀、难以归属到具体业务模块。
- 真实场景中，
body上的点击事件可能来自iframe子页面（跨域时 event.target 为空）、Shadow DOM 节点（无法被普通closest()匹配）或 SSR 渲染残留 DOM - 多个子应用共用同一份埋点脚本时，
dataset命名冲突（如都用data-track="submit"）会导致归因失败 - 监听器无法感知组件挂载/卸载，当某个模块被 React.lazy 或 Vue.defineAsyncComponent 卸载后，其绑定的防重标记
dataset.tracked仍留在 DOM 上，下次渲染同结构节点会跳过上报
data-* 属性怎么命名才不和组件框架打架
大型系统通常混合使用 Vue、React、Svelte 和原生 Custom Elements，而各框架对 dataset 的处理策略不同：Vue 模板中 data-log-module="user-profile" 会被保留；React JSX 中 dataLogModule="user-profile" 会转成 data-log-module，但若写成 data-log-module={value} 则可能被当作字符串字面量而非属性绑定。
- 统一用 kebab-case 声明，如
data-a11y-role="main-nav"、data-a11y-label="搜索框"，避免框架自动驼峰转换带来的歧义 - 禁止使用
data-aria-前缀（如data-aria-labelledby），它和真实aria-labelledby属性语义冲突，且部分自动化审计工具会误判为冗余 - 敏感上下文（如当前 tab index、焦点状态、朗读暂停标志）不要塞进
dataset，应由 JS 状态管理维护，仅通过data-a11y-id="search-input-123"做轻量锚定
如何让埋点和屏幕阅读器播报节奏同步
可访问性埋点不是记录“用户点了什么”，而是记录“辅助技术告诉用户什么、用户据此做了什么”。例如，当 aria-live="polite" 区域更新后，用户可能还没听到播报就点了按钮——此时上报的“操作路径”就断裂了。
立即学习“前端免费学习笔记（深入）”；
- 监听
aria-live区域变化需搭配MutationObserver，而非只靠 click；上报 payload 中应包含liveRegionId和变更前后的文本快照 - 键盘操作（Tab/Shift+Tab/Enter/Space）必须单独监听
keydown，不能依赖 click 事件——因为role="button"元素在无焦点时不会触发 click - 防重逻辑要区分交互类型：
dataset.tracked-click和dataset.tracked-keydown应分开标记，否则键盘用户连续按两次 Enter 只会上报一次 - 上报字段里加
interactionMode: "keyboard" | "mouse" | "touch" | "voice"，后续可用于分析 AT 用户行为拐点
埋点 SDK 初始化阶段最容易忽略的三个兼容点
大型系统往往有多个入口 HTML、多套构建产物、SSR/CSR 混合渲染，SDK 初始化稍有偏差，整个可访问性埋点链路就静默失效。
-
document.readyState === "complete"才真正可靠，DOMContentLoaded在某些微前端沙箱中可能提前触发，此时main或nav标签尚未注入 - 若系统用了
iframe嵌套主应用（如 portal 架构），必须在每个iframe内独立初始化 SDK，且window.parent通信需校验event.source === iframe.contentWindow防止 XSS - Chrome 126+ 对
navigator.sendBeacon()的跨域限制变严，含可访问性上下文的上报若带 credentials，需确认后端已配置Access-Control-Allow-Origin: *或精确域名，否则静默丢弃
最隐蔽的问题是：当你把所有 main、nav、section 都加上了正确语义，却忘了给每个 aria-live 区域配唯一 id——没有 ID，MutationObserver 就无法精准定位变更源，上报的“哪个区域更新了”字段永远为空。这问题不会报错，但会让整个可访问性行为分析失去根节点。
