让 JAWS 在加载新内容时以编程方式读取页面标题

Question

我继承了一个项目，该项目使用大量 click-triggered JS 来更改页面内容，而不是 linking 到不同的实际 HTML 页面。我被要求让 JAWS 在发生这种情况时读取页面标题，就好像正在加载新页面一样。

根据我的观察和少量测试，阅读页面标题（即 <title> 标记的内容）是 JAWS 在 link 转到新的单独页面时的标准行为（如在 foo.html 文件中），但单击 same-page link 或按钮时不会发生什么。

如何让 JAWS 在单击 link 或按钮后读取页面的标题，该按钮以一种对用户来说似乎是新页面但实际上是同一个文件的方式更改现有页面的内容在幕后？

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

Answer 1

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

你仍然想更新标题，即使它没有被阅读，因为屏幕reader用户可以使用快捷键（INS+T with jaws) 阅读页面标题。当用户在浏览器和另一个应用程序之间切换然后再次返回时，他们会听到标题，因此更新标题仍然很重要。

有一些关于无障碍 SPA 的不错的博客：

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

(*) 注意，在视觉上隐藏 aria-live 区域时，不要使用 CSS display:none 因为那样也会从屏幕上隐藏它 reader .使用 sr-only 类型 class。参见 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");
});

加载新内容时被调用。

Make JAWS read page title programmatically when loading new content