Question

我正在创建a website for a reading service for the blind and visually impaired并且我正在使用JavaScript（使用jQuery）在页面加载后将某些内容打印到某些页面。

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

从this page - “通常，[屏幕阅读器]访问DOM（文档对象模型），他们使用浏览器API（应用程序编程接口）来获取他们需要的信息。”

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

所以问题变成..屏幕阅读器是否会获取整个DOM的副本，然后解析并阅读它？或者他们是否读取了与jQuery相同的DOM？

以下是我使用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（a recent survey shows 99％的屏幕阅读器用户启用了JavaScript）那么问题就无法解决，因为现在的屏幕阅读器变得更糟用户会认为没有启用JavaScript。

怎么做??

Answer 1

您可以在不需要知道屏幕阅读器如何解析DOM的情况下对此进行测试。我提供这个答案主要是因为你没有提供任何代码来测试（“某些页面的某些东西”不是要测试的代码）而你的例子没有提供足够的上下文。

安装NVDA，一个适用于Windows的免费屏幕阅读器。
如果在Mac上，请启用VoiceOver。
如果在Ubuntu / Gnome上，请安装Orca
下载并运行JAWS。
如果在iOS上，请启用VoiceOver。
如果在Android上，请启用TalkBack。
哎呀，试试Windows上的讲述者。

有很多教程可以让您启动并运行。这是一对夫妇：

A video overview of NVDA。
获取keyboard shortcuts for many screen readers。

然后，如果您发现您的脚本在屏幕阅读器已经解析后修改了DOM，请浏览ARIA live regions，然后查看browser support。

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

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

如果浏览器启用了脚本，则不会呈现（这很好）。但是，这不会解决您希望显示的脚本块因其他原因（网络延迟，错误等）而失败的情况。 More on <noscript>

既然您说“正在为盲人和视障人士创建一个阅读服务网站”，那么您就有责任学习这些工具以及如何使用它们进行测试。

Answer 2

＆＃34;通常，[屏幕阅读器]访问DOM（文档对象模型），他们使用浏览器API（应用程序编程接口）来获取所需的信息。＆＃34;

现代屏幕阅读器使用辅助功能API。他们不必了解任何有关Javascript 的信息，也不了解真正的DOM和HTML （ChromeVox除外）。

出于这个原因，相同的屏幕阅读器将用于使用您喜欢的浏览器查询Internet，使用您喜欢的程序（Thunderbird，Outlook，...）编写邮件或使用 Flash播放器游戏，只要这些程序为其Accessibility API提供正确的信息。他们不会直接解析HTML，而是可以访问文档的树视图。

这意味着如果您的浏览器了解javascript，您的屏幕阅读器将会。这是因为，您的屏幕阅读器不会直接在页面加载中访问DOM，而是会与浏览器提供的Accessibility API进行交互。

现在，显然，如果您的屏幕阅读器在javascript修改之前读取内容，它就不会对javascript所做的修改有任何线索。就此而言，您可以使用aria-live属性。

这是一个简短的摘要，但下面的文章可以为您提供有关屏幕阅读器解析DOM的更多信息： Why accessibility APIs matter

Answer 3

我需要告诉屏幕阅读器页面已经更改，并且需要再次阅读内容。

这是通过ARIA属性完成的。

我已将aria-live="polite"添加到我的HTML中。＆＃34;礼貌＆＃34;设置告诉屏幕阅读器它应该读取新内容但不中断当前正在说的内容。 IIRC其他设置为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读取附加到文档中的内容，但坏消息是网站的流量和他的期望存在更大的问题。这当然是我的错。

屏幕阅读器和Javascript

3 个答案: