沙箱中可访问性问题需系统修复：①用domparser清理aria-hidden和tabindex；②禁用内联事件改用addeventlistener；③统一role="presentation"替代role="none"；④加载后运行axe检查。
沙箱中aria-hidden="true"被滥用导致屏幕阅读器跳过关键内容
沙箱 iframe 里若直接复用旧 HTML 片段，aria-hidden="true"常被无差别加在容器上，结果把按钮、输入框一并隐藏——这不是“隔离”，是主动屏蔽可访问性。浏览器不会报错，但 NVDA/JAWS 会彻底跳过整个区域。
实操建议：
- 沙箱加载前，用
DOMParser解析 HTML 字符串，遍历所有带aria-hidden的元素 - 对
button、input、select、textarea、[role="button"]等交互节点，强制移除aria-hidden属性（哪怕父容器有） - 只保留
aria-hidden="true"在纯装饰性元素上，如图标span、分隔线hr、背景图容器 - 若子应用依赖旧版框架（如 jQuery UI 1.x），其自动生成的
aria-hidden往往失控，需在挂载前用正则预处理：htmlString.replace(/aria-hidden=["']true["']/gi, '')，再针对性补回
tabindex="0"在沙箱中引发焦点陷阱
老代码习惯给非交互元素（如 div）加 tabindex="0" 实现键盘操作，但在沙箱 iframe 中，这会导致焦点卡死：用户按 Tab 进入后无法靠 Shift+Tab 退出，因为 iframe 外部焦点管理失效。
实操建议：
- 沙箱内禁止使用
tabindex="0"，除非该元素明确实现了keydown处理（如Enter/Space触发行为）且绑定了blur清理逻辑 - 用
querySelectorAll('[tabindex]')扫描解析后的doc.body，对tabindex值为0且无对应事件监听的元素，设为tabindex="-1" - 若必须保留键盘可聚焦能力，改用
role="button"+aria-pressed等语义化方案，由浏览器原生支持焦点流转 - 注意：沙箱 iframe 的
document.activeElement默认指向body，不等于父页，不能靠parent.document.activeElement跨帧判断
沙箱中 onfocus/onblur 内联事件被 sandbox 静默拦截
写了 onfocus="handleFocus()" 却没反应？不是 JS 错，是 sandbox="allow-scripts" 下内联事件处理器全被浏览器静默丢弃——控制台零报错，焦点事件根本不到达元素。
实操建议：
- 沙箱内所有事件绑定必须走
addEventListener，禁止任何onxxx属性；DOMParser 解析后，遍历所有含onfocus、onblur、onkeydown等属性的节点，提取逻辑转为脚本注入 - 对
input、textarea等表单控件，优先用focusin/focusout事件替代focus/blur，前者冒泡、后者不冒泡，更易在 Shadow DOM 中捕获 - 若子应用使用 React/Vue，确保其 runtime 不依赖内联事件降级（如 Vue 2 的
v-on:click.native在沙箱中可能失效），构建时启用inline-template提前编译 - 验证是否生效：在沙箱 iframe 控制台执行
document.querySelector('input').hasAttribute('onfocus')应返回false
沙箱中 role="presentation" 与 role="none" 混用破坏语义层级
老代码常把 role="presentation" 和 role="none" 当同义词乱用，但在沙箱环境下，部分屏幕阅读器（尤其是 JAWS 2024+）对 role="none" 解析更激进，可能连父容器的 role="group" 也一并忽略，导致整块导航区不可读。
实操建议：
- 统一替换：所有
role="none"改为role="presentation"；前者仅在 ARIA 1.2+ 中定义，沙箱 iframe 的 UA 字符串常被识别为旧 UA，触发兼容模式 - 禁止在
table、tr、td上用role="presentation"—— 这会覆盖原生表格语义，应改用 CSSdisplay: table-cell模拟布局 - 对
div[role="presentation"] > div结构，检查子元素是否有role或aria-*属性，若有，则父级role="presentation"会切断语义继承链，需移除或改用aria-hidden="true" - 沙箱加载完成后，运行一次可访问性检查：
axe.run(iframe.contentDocument, { runOnly: ['aria-allowed-role'] })，过滤出违规role使用
沙箱环境里可访问性修复不是“加个属性就完事”，它和权限配置、DOM 解析、Shadow DOM 挂载强耦合——漏掉任意一环，比如没在 DOMParser 后清理 tabindex，或忘了在 adoptedStyleSheets 注入前校验 role，都会让修复失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
