单页应用程序的ARIA活动区域 导航前点击链接导航后已加载新内容

编程问答 2022-07-20

问题描述

我是网页可访问性的新手。我有一个应用程序，其内容根据ajax调用中的标题链接单击而更改，而无需刷新页面。因此，每次链接单击时，具有不同页面内容（表+按钮+信息文本）的主体内部HTML内容都会更新。

我在这里的要求是，每次页面加载时，屏幕阅读器都应宣布信息文本。在这里，容器是所有页面的主体（或主体内部的直接div）。因此，我将其设置为aria-live =“ polite”，但是每次页面加载时，它都会宣布整个页面的内容，但是我想让它仅宣布信息文本。页面的其他元素应重点关注/宣布。我希望我可以将aria-live =“ off”应用于所有其他元素，但我正在为此寻找任何理想的解决方案。我无法更改应用程序的布局。

有人可以帮我这个忙吗？预先感谢。

解决方法

您是否尝试包装“活动区域”-使用aria-live =“ polite”在div中进行更新的地方。然后，屏幕阅读器将仅在更新时宣布这些区域。不要将整个页面或div包裹在aria-live =“ polite”中。

<div aria-live="polite">
    <p id="errorText">Announced on update</p>
</div>
<div>
  other page sections..
</div>
,

SPA模式最佳做法

基本上，您正在遵循“单页应用程序”模式。因此，推荐用于处理导航的方法实际上很简单，只需两个步骤。

  1. 告诉用户导航将要发生（导航之前）
  2. 让用户知道加载已完成（导航后）。

导航前（点击链接）

如果您正在使用SPA模式，则需要向用户发送信号，表明页面正在加载（从而中断了正常导航）。例如我点击了您的链接，您需要告知我，e.preventDefault()或同等功能拦截正常的浏览器行为时，正在执行一个操作（正在加载...）。

最简单的方法是在解释页面正在加载的区域上使用aria-live=assertive。您可以使用Google如何正确地实现该功能，但从本质上讲，您会在第二次单击链接时使用一些加载消息来更新隐藏的div（<div aria-live="assertive" class="visually-hidden">loading</div>）的内容。

应该在进行任何AJAX调用之前完成此操作。

导航后（已加载新内容）

加载新页面时，您需要管理焦点。

执行此操作的最佳方法是在每个具有<h1>的页面上添加一个1级标题（tabindex="-1"）。使用tabindex="-1"意味着标题不会被JavaScript以外的其他任何对象聚焦，因此不会干扰正常的文档流程。

页面加载完毕并完全填充内容后，您在JavaScript导航功能中执行的最后操作就是将焦点放在该标题上。

这有两个好处：

  1. 它使用户知道他们现在在哪里
  2. 它还让他们知道页面加载的完成时间（因为在大多数屏幕阅读器中加载页面时AAAX导航不会宣布）。

这时，您可能还希望清除<div aria-live="assertive">的内容，以便为进一步的导航做好准备。

accessibilityhtmlwai-aria