Question

我继承了一个项目，该项目使用许多单击触发的JS来更改页面内容，而不是链接到不同的实际HTML页面。系统要求我让JAWS读取页面标题，就像正在加载新页面一样。

根据我的观察和一点点的测试，链接到新的单独页面（如{{1中的）时，读取页面标题（即<title>标记的内容）是JAWS的标准行为。 }}文件），但单击同一页面的链接或按钮时不会发生这种情况。

在单击链接或按钮后，如何改变页面的内容，从而使JAWS读取现有页面的内容，对用户来说，这似乎是一个新页面，但实际上是相同的文件？

对于这个问题，请假设重构我必须使用实际的新页面而不是JS内容替换的选项。如果我的最初假设有问题，请也告诉我。

Answer 1

听起来您有一个单页应用程序（SPA）。您不能强制读取<title>元素本身，但是如果您也将相同的文本放入aria-live="polite"容器（视觉上隐藏的<div>或<span>（*）），它将被读取。

即使标题未读，您仍要更新标题，因为屏幕阅读器用户可以使用快捷键（ INS + T 带有下巴）进行阅读页面标题。当用户在浏览器和另一个应用之间切换然后再次返回时，他们会听到标题，因此更新标题仍然很重要。

关于可访问的SPA有一些不错的博客：

Accessible page titles in a Single Page App专门讨论关于SPA中的页面标题
Building Accessible Single Page Apps讨论一般原则，但实际上没有任何原则代码示例
Single page applications, Angular.js and accessibility专门讨论了使用angular的问题，但是可以通用地应用概念和代码示例。

（*）请注意，在视觉上隐藏aria-live区域时，请勿使用CSS display:none，因为这也会从屏幕阅读器中隐藏它。使用sr-only类型的类。参见What is sr-only in Bootstrap 3?

Answer 2

slugolicious的答案中有很好的信息。不过，该特定问题的解决方案较为简单：<title>元素可以进行ARIA修饰。

<title role="banner" aria-live="polite">Default title here</title>

结合

$(function() {
    // existing logic here

    $(title).html("New title here");
});

在加载新内容时被调用。