我是网页可访问性的新手。我有一个应用程序，其中正文的内容会根据在 ajax 调用中单击的标题链接而更改，而无需刷新页面。因此，每次链接点击都会更新正文中的 HTML 内容，并使用不同的页面内容（表格 + 按钮 + 信息文本）。
我的要求是屏幕阅读器应该在每次页面加载时宣布信息文本。这里的容器是所有页面的主体（或主体内的直接 div）。所以我把它设为 aria-live="polite"，但每次页面加载时它都会宣布整个页面内容，但我想让它只宣布信息文本。页面的其他元素应在焦点/访问时公布。我希望我可以将 aria-live="off" 应用于所有其他元素，但我正在为此寻找任何理想的解决方案。我无法更改应用程序的布局。
有人可以帮我解决这个问题吗？提前致谢。
【问题讨论】：
标签： html accessibility wai-aria
您实际上是在遵循单页应用程序模式。因此，推荐用于处理导航的方法实际上非常简单，只需两个步骤。
如果您使用的是 SPA 模式（因此会中断正常导航），则需要向用户发出页面正在加载的信号。例如我点击了您的链接，您需要让我知道正在执行某个操作（正在加载.....），因为您使用 e.preventDefault() 或等效项拦截了正常的浏览器行为。
最简单的方法是在解释页面正在加载的区域上使用aria-live=assertive。你可以谷歌如何正确实现它，但本质上你会更新隐藏 div 的内容（<div aria-live="assertive" class="visually-hidden">loading</div> 在点击链接的第二个加载消息。
这应该在进行任何 AJAX 调用之前完成。
当新页面加载时，您需要管理焦点。
执行此操作的最佳方法是向具有tabindex="-1" 的每个页面添加一个级别 1 标题 (<h1>)。使用 tabindex="-1" 意味着标题不会被 JavaScript 以外的任何东西聚焦，因此不会干扰正常的文档流。
一旦页面加载完毕并且内容已完全填充，您在 JavaScript 导航功能中执行的最后一个操作就是将焦点放在此标题上。
这有两个好处：
此时您可能还想清除<div aria-live="assertive"> 的内容，以便为进一步导航做好准备。
【讨论】：
您是否尝试过使用 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>
【讨论】：