屏幕阅读器和Javascript

Question

我正在创建一个 面向盲人和视障人士的阅读服务网站，并使用JavaScript（带有jQuery）在页面加载后将一些内容打印到某些页面上。

屏幕阅读器是否会读取使用jquery打印到页面上的内容？

从此页面中可以了解到-"通常，[屏幕阅读器]访问DOM（文档对象模型），并使用浏览器API（应用程序编程接口）获取所需信息。"

我们知道jQuery是一个DOM操作库。

因此问题变成了...屏幕阅读器是否会获取整个DOM的副本，然后解析并阅读它？还是他们阅读DOM，就像jQuery所作的一样？

以下是我在其中一个页面上使用JavaScript的示例。它使用一个函数来确定我们正在播放的节目，并打印出该节目的名称和听取链接。

<div id="now-playing-div"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector);
});

</script>

所以，正如您所看到的，如果屏幕阅读器不能读取javascript/jquery打印到＃now-playing-div的内容，则不会读出任何内容。接着，我们开始收到一些困惑的听众的电子邮件，他们想知道“现在播放”链接发生了什么事情。

今天早上我加入了这个：

<div id='no-js'>Please enable JavaScript to receive this content.</div>

<script>
$( document ).ready( function() {
  $('#no-js').toggle();
});

</script>

但是，如果问题不在于需要启用JavaScript(最近的一项调查显示99%的屏幕阅读器用户已经启用了JavaScript)，那么问题就没有得到解决，反而会变得更糟，因为现在屏幕阅读器用户会认为JavaScript未启用。

该怎么办？

- Dan Mantyla

---

您必须与特定的屏幕阅读器提供商进行核实。无法回答这个问题 - 他们应该查询实时DOM，因此可以看到任何更改。但是，如果某个屏幕阅读器只查询一次并缓存，则可能不应使用它。 "静态"页面实际上已经不存在了，从立即死亡/无用/陈旧的页面副本出发工作非常无意义/愚蠢。 - Marc B

有一个很好的方法来进行最初的测试 - 安装 NVDA , 这是一款免费的Windows屏幕阅读器。 如果您使用的是 Mac，可以尝试 VoiceOver 。 您还可以下载并运行 JAWS 的试用版。 获取NVDA的视频概述或所有键盘快捷方式，然后探索ARIA实时区域。 - aardrian

Answer 1

您可以测试此功能，而无需了解屏幕阅读器如何解析DOM。 我提供此答案主要是因为您没有提供任何可供测试的代码（“一些内容添加到某些页面”不是可供测试的代码），并且您的示例没有提供足够的上下文。

• 安装NVDA，这是一个免费的Windows屏幕阅读器。
• 如果在Mac上，请打开VoiceOver。
• 如果在Ubuntu / Gnome上，请安装Orca
• 下载并运行JAWS的试用版。
• 如果在iOS上，请打开VoiceOver。
• 如果在Android上，请打开TalkBack。
• 甚至可以尝试Windows上的Narrator。

有很多教程可以帮助您开始使用。以下是其中的几个：

• NVDA的视频概述。
• 获取许多屏幕阅读器的键盘快捷键列表。

然后，如果您发现脚本在屏幕阅读器解析DOM之后修改了它，请探索ARIA实时区域，然后查看浏览器支持。

最后，您上面关于检测脚本是否启用的示例实际上不需要脚本工作，如果使用<noscript>元素：

<noscript>
 <p>
 Please enable JavaScript to receive this content.
 </p>
</noscript>

如果浏览器启用了脚本，则此内容不会呈现（这很好）。但是，这并不能解决脚本块由于其他原因（网络延迟、错误等）未能显示的情况。了解更多关于<noscript>的信息 既然你说你要“为盲人和视障人士创建一个阅读服务网站”，那么责任就在于你学习工具以及如何进行测试。

- aardrian

---

抱歉，那不是我的本意（尽管我现在看到它听起来有点刺儿）。问题的一部分是这是一个不断变化的目标，所以很难给出简单的答案。 - aardrian

Answer 2

一般情况下，[屏幕阅读器]访问DOM（文档对象模型），并使用浏览器API（应用程序编程接口）获取所需信息。现代屏幕阅读器使用无障碍API，它们不必了解JavaScript或实际的DOM和HTML（仅ChromeVox除外）。因此，只要这些程序向其无障碍API提供正确的信息，相同的屏幕阅读器将用于使用您喜爱的浏览器浏览互联网、使用您喜爱的程序（Thunderbird、Outlook等）写邮件或玩Flash播放器游戏。它们不直接解析HTML，而是解析文档的可访问树视图。这意味着如果您的浏览器理解JavaScript，您的屏幕阅读器也会理解。这是因为您的屏幕阅读器不会在页面加载时直接访问DOM，而是与浏览器提供的无障碍API交互。显然，如果您的屏幕阅读器在JavaScript修改内容之前读取内容，则无法了解JavaScript所做的修改。为此，您可以使用aria-live属性。这是一个简短的摘要，但以下文章可以为您提供有关屏幕阅读器解析DOM的更多信息：为什么无障碍API很重要。

- Adam

Answer 3

我需要告诉屏幕阅读器页面已经发生了改变，需要重新读取内容。

这可以通过ARIA属性完成。

我已经在我的HTML中添加了aria-live="polite"。 "polite"设置告诉屏幕阅读器它应该读取新内容，但不打断当前正在说的内容。如果我没有记错，其他设置为off和assertive。

<div id="now-playing-div" aria-live="polite"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector); // the callback will append HTML to the element via jquery with the selector as the query term
});

</script>

现在我正在让一个看不见任何东西的人测试网站，他曾经能够看到并学会使用计算机，但后来失去了视力。不幸的是，他在使用网站时遇到了麻烦。问题在于当他到达听音频页面时，他使用键盘快捷键搜索播放按钮，但没有播放按钮，因为播放按钮（jplayer）位于弹出窗口中，需要点击链接才会出现。他感到沮丧，电话就此结束 :(

好消息是，他能够通过jquery添加到文档中的内容，但坏消息是，网站的流程和他的期望存在更大的问题。这当然是我的错。

- Dan Mantyla