屏幕阅读器和 Javascript答案

【问题标题】：Screen readers and Javascript屏幕阅读器和 Javascript
【发布时间】：2016-09-23 09:28:58
【问题描述】：

我正在创建a website for a reading service for the blind and visually impaired，我正在使用javascript（用jquery）将一些东西打印到页面加载后的一些页面。

将屏幕阅读器读取在页面加载后用jQuery打印到页面的内容？

从this page - “一般来说，[屏幕读者]访问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-Play-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 未启用。

怎么办??

【问题讨论】：

您必须咨询特定的屏幕阅读器提供商。没有办法回答这个问题 - 他们应该查询实时 dom，因此会看到任何变化。但是如果一个特定的查询一次并缓存，那么它可能不应该被使用。 “静态”页面不再存在，并在页面的立即死亡/无用/陈旧的副本上工作非常毫无意义/愚蠢。 span>
初始测试的好方法 - 安装NVDA，免费屏幕阅读器。如果您使用的是 Mac，请尝试 VoiceOver。您还可以下载并运行JAWS 的试用版。获取video overview of NVDA 或keyboard shortcuts for all。之后，探索ARIA live regions。

标签： javascript jquery accessibility screen-readers jaws-screen-reader

【解决方案1】：

您无需了解屏幕阅读器如何解析 DOM 即可对此进行测试。我提供这个答案主要是因为您没有提供任何要测试的代码（“某些页面的某些内容”不是要测试的代码）并且您的示例没有提供足够的上下文。

安装NVDA，一款适用于 Windows 的免费屏幕阅读器。
如果在 Mac 上，请打开 VoiceOver。
如果在 Ubuntu / Gnome 上，请安装 Orca
下载并运行JAWS 的试用版。
如果在 iOS 上，请打开 VoiceOver。
如果在 Android 上，请打开 TalkBack。
见鬼，试试 Windows 上的讲述人。

有很多教程可以帮助您启动和运行。以下是一对：

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>

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

【讨论】：

对不起，这不是我的意图（尽管我现在发现这听起来有点刺耳）。部分问题在于这是一个移动的目标，因此很难给出简单的答案。

【解决方案2】：

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

现代屏幕阅读器使用 Accessibility API。他们不必了解 Javascript 或真正的 DOM 和 HTML （ChromeVox 除外）。

因此，相同的屏幕阅读器将用于通过您最喜欢的浏览器访问 Internet、使用您最喜欢的程序（Thunderbird、Outlook 等）编写邮件或播放 Flash 播放器游戏，只要这些程序向其辅助功能 API 提供正确的信息。它们不直接解析 HTML，而是解析文档的可访问树视图。

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

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

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

【讨论】：

【解决方案3】：

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

这是通过 ARIA 属性完成的。

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

【讨论】：