SPA（Angular）应用无障碍改造：报表生成后的焦点与ARIA问题

针对你提出的四个问题，结合WCAG实践和屏幕阅读器测试经验，给出如下建议：

1. 焦点设置到报表区域的方案是否值得推进？ #

值得推进，但需先解决ARIA标签被忽略的问题：

• 优先使用原生标题元素（<h1>-<h6>）而非ARIA的role="heading"，原生元素兼容性更好，屏幕阅读器识别更可靠。若必须用ARIA，需给元素添加tabindex="-1"使其可聚焦，且aria-level值要与标题层级逻辑匹配（比如报表主标题用aria-level="2"，配合页面主标题的<h1>）。
• 焦点应定位到报表的第一个可聚焦语义化元素，比如报表的主标题，而非整个报表容器，这样屏幕阅读器会从标题开始读取内容，符合用户操作后的预期。
• 该方案符合WCAG中“导航机制可识别内容变化”的要求，能帮助用户直接定位到生成的核心内容，减少额外操作步骤。

2. 是否保留焦点在按钮，用“跳转到内容”链接？ #

不建议作为主要策略，仅可作为辅助选项：

• 用户点击“生成报表”后的核心预期是查看报表，保留焦点在按钮会让用户困惑，需额外操作才能找到内容，增加认知负担。
• 若担心部分用户需要返回筛选区域，可在报表顶部添加“返回筛选条件”的链接，而非依赖“跳转到内容”。

3. 是否使用aria-live策略？ #

可以配合焦点管理使用，但不单独依赖：

• 预先在页面中添加隐藏的aria-live="polite"区域（不要动态创建），生成报表时更新区域文本，比如“已生成XX类型报表，共XX条记录”，用于通知用户内容已更新。
• 仅用aria-live无法解决冗长报表的读取问题：polite模式只会播报区域内的文本，不会遍历整个报表；assertive模式会打断用户当前操作，体验较差。
• 结合焦点移动，用live通知告知用户内容更新，同时将焦点定位到报表，既能传递更新信息，又能让用户直接开始浏览报表。

4. 是否修改浏览器窗口标题？ #

强烈推荐：

• SPA页面内容更新时修改窗口标题是WCAG的最佳实践，屏幕阅读器用户依赖标题了解当前页面内容，尤其是无路由变化的场景。
• 标题应包含报表类型和核心信息，比如从“报表生成工具”改为“XX销售报表 - 报表生成工具”，帮助用户快速识别当前内容。

SPA通用无障碍补充建议 #

虽然WCAG没有专门针对SPA的条款，但以下实践适用于此类场景：

• 动态内容更新时，确保焦点跟随核心内容变化，避免焦点丢失在原位置。
• 避免用纯JS控制内容切换却不提供语义化标记，确保所有动态内容都有正确的HTML语义或ARIA属性。
• 测试时结合多种屏幕阅读器和浏览器，重点验证焦点移动、语义识别、内容播报逻辑。

内容的提问来源于stack exchange，提问作者TerrorBight