根本原因是各子系统缺乏统一的HTML结构约束、ARIA语义传递机制和焦点管理边界；主应用必须强制收口document.title、meta标签、aria属性绑定及焦点调度，禁止子应用直接操作全局语义节点与DOM。
微前端下可访问性（a11y）不一致，根本原因不是技术做不到，而是各子系统各自为政——没有统一的 HTML 结构约束、ARIA 语义传递机制和焦点管理边界。必须从主应用层强制收口，而非依赖子应用自觉遵守。
主应用必须统一管控 document.title 和 <meta> 等全局语义节点
子应用自行设置 document.title 或插入 <meta name="description"> 会覆盖主应用语义，且无法还原。屏幕阅读器读取的是最终 DOM 状态，不是“哪个子应用当前激活”。
- 主应用应暴露
window.__setPageTitle(text, priority)接口，带防抖和历史栈记录，支持子应用声明标题权重 - 所有
<meta>、<link rel="canonical">等语义标签，只允许主应用通过document.head操作；子应用需通过事件（如customEvent('a11y:meta-update', { name: 'description', content: '...' })）申请变更 - 禁止子应用直接操作
document.body.setAttribute('aria-hidden', 'true')—— 这会导致焦点被锁死在子应用内，破坏跨应用键盘导航流
子应用 HTML 模板必须通过 DOMParser + adoptedStyleSheets 注入 Shadow DOM
直接 innerHTML 插入子应用 HTML，会让其中的 <button aria-label="删除"> 被主应用 CSS 覆盖样式、被全局 JS 监听器劫持事件，ARIA 属性形同虚设。
- 主应用加载子应用 HTML 字符串后，必须用
new DOMParser().parseFromString(html, 'text/html')解析，分离出<style>和<script> -
<style>内容转为CSSStyleSheet实例，再赋值给shadowRoot.adoptedStyleSheets，确保样式不穿透、不污染 - 子应用模板中所有
aria-属性（如aria-expanded、aria-controls）必须使用动态绑定，禁止硬编码 ID；例如aria-controls="menu-${uuid}"，避免多个子应用重复 ID 导致 ARIA 关系断裂
键盘焦点必须由主应用统一调度，禁止子应用自主 focus()
子应用在 mounted 阶段调用 document.getElementById('search-input').focus()，会打断用户正在使用的 Tab 流程，尤其当焦点落在非可见子应用容器内时，屏幕阅读器直接失声。
立即学习“前端免费学习笔记（深入）”；
- 主应用维护一个焦点队列：当子应用激活时，向队列推入其“默认可聚焦元素选择器”，如
{ app: 'shop', selector: '[data-a11y-focus="true"]' } - 用户按下 Tab 键时，主应用拦截事件，按队列顺序将焦点移入当前活跃子应用的指定元素；Shift+Tab 则反向调度
- 子应用内所有
tabindex必须显式声明，禁用tabindex="-1"以外的负值——否则焦点会跳过该元素，但屏幕阅读器仍可能朗读，造成逻辑错位
htmlhint 和 eslint-plugin-html 必须按子应用类型分路径校验
Vue 子应用里写 <button v-bind:aria-label="btnText">，纯 HTML Lint 工具会报错“未知属性 v-bind:aria-label”，但这不是问题，是框架语法。反过来，React 子应用里漏掉 aria-label 却可能逃过检测。
- 对纯 HTML 文件（如子应用入口
index.html），用htmlhint校验alt、role、对比度相关属性 - 对 Vue/React 模板文件，用
eslint-plugin-html+ 对应框架插件（如eslint-plugin-vue），校验v-bind:aria-绑定是否完整、是否拼写错误 - CI 中每个子应用的 Lint 步骤必须独立运行，且失败即阻断发布 —— 可访问性缺陷不是“优化项”，是合规红线
真正难的不是写对某一行 aria-live="polite"，而是让所有子应用在 DOM 结构、焦点流、语义更新节奏上保持同一套时间轴。主应用不是协调者，是强制执行者；子应用不是参与者，是受控单元。
