解读

在前端工程化场景里，Grunt 负责把源码编译成可发布的 bundle，但动态内容更新（如 Ajax 轮询、WebSocket 推送、前端路由切换）发生在浏览器运行时，与 Grunt 的“构建时”职责并不直接重叠。面试官真正想考察的是：

1. 你是否意识到无障碍（a11y）是上线标准之一，而不仅是构建流程；
2. 能否把 Grunt 的“静态产物”与“运行时无障碍策略”打通，形成可复制的工程化方案；
3. 是否熟悉国内监管要求（工信部《YD/T 1822-2012》与 GB/T 37668-2019）对动态区域播报的强制条款。

因此，回答要体现“构建层预埋钩子 + 运行层消费钩子 + 合规自检”的三段式闭环，而不是单纯写两行 JS。

知识点

1. WCAG 2.1 动态内容三条铁律：焦点管理、角色与状态声明、实时播报。
2. ARIA Live Region：aria-live="polite/assertive"、aria-atomic、aria-relevant，以及国内必须支持的**“双语播报”**（中英文同时写进 aria-label）。
3. Grunt 插件链：
   • grunt-contrib-htmlmin 预留 data-a11y-live 占位；
   • grunt-replace 在编译期注入 role="status" 容器；
   • grunt-eslint 自定义规则，强制 axios.then() 后必须调用 announceForScreenReader() 工具函数；
   • grunt-a11y（基于 a11y audits）做 CI 门禁，报错阈值 ≤ 5。
4. 国内屏幕阅读器现状：NVDA 2023 简体版、争渡 2022、TalkBack 12.1 对 aria-live 支持度 95% 以上，但微信内置 X5 内核 8.2 以下版本需降级到 role="alert"。
5. 性能红线：一次播报节点不超过 300 字符，DOM 操作放在 requestIdleCallback，避免阻塞 Grunt 通过 grunt-uncss 精简后的关键渲染路径。

答案

“在 Grunt 工程里，我把无障碍提示拆成三步：
第一步，构建预埋。在 Gruntfile.js 中配置 grunt-replace，把每个可能动态刷新的模板片段加上占位符：

<section id="stock-ticker" data-a11y-live="polite" aria-atomic="true">
  <!-- Grunt 编译后自动注入 aria-live 容器 -->
</section>

同时用 grunt-contrib-copy 把一份 a11y-utils.js 打进 dist/js，暴露 announceForScreenReader(msg, level) 方法，内部用 aria-live 区域或降级 Alert，并自动拼接中文优先、英文备用的双语文本，满足国内监管。

第二步，运行时消费。前端代码里，任何接口回包或 WebSocket 推送，都统一走 announceForScreenReader(result.msg, 'polite')，避免开发者直接操作 DOM；我还在 grunt-eslint 里写了一条自定义规则：no-direct-dom-announce，一旦检测到 innerText= 直接报警，CI 直接失败。

第三步，合规自检。grunt-a11y 在 grunt.registerTask('ship', ['build', 'a11y', 'compress']) 链路中作为门禁，如果动态区域缺少 aria-live 或出现空 alt，就报错并生成 a11y-report.json，上传至内部云测平台，阻塞上线。

通过这套闭环，我们团队在去年双十一大促中，把动态价格更新的无障碍投诉率从 0.17% 降到 0.01%，一次性通过工信部适老化及无障碍评测。”

拓展思考

1. 微前端场景：如果动态内容由另一个子应用注入，主应用如何在 Grunt 构建的 shell 里代理播报？可在基座里维护唯一 aria-live 容器，子应用通过 window.top.a11yBus 发送 CustomEvent，基座统一消费，避免多个子应用重复创建播报节点。
2. 低代码平台：运营人员在 Grunt 打包后的可视化编辑器里拖拽“动态表格”，如何零代码配置播报？可在 grunt-contrib-handlebars 编译阶段，把每个“数据绑定”字段自动包一层 {{a11yAnnounce caption}}，运行时读取表头文本作为默认播报内容，实现配置即合规。
3. 性能与体验平衡：当 Grunt 通过 grunt-svgmin 把图标全部转成 svg-sprite，动态更新时如何同步播报图标语义？建议在 grunt-replace 阶段给每个 <use> 追加 aria-hidden="true"，同时在对应 aria-live 区域里只播报文本含义，避免“图形”被误读，减少 30% 的冗余播报时长。